La última posibilidad que vamos a ver se refiere a la resolución del dispositivo en el que se mostrará la imagen. Vamos a verlo sobre el siguiente ejemplo.
<picture>
<source srcset="graficos/pendientes_2x3_peq.jpg, graficos/en_rio_grande_800.jpg 2x">
<img src="graficos/por_si_acaso.jpg" alt="Si no se cumple ninguna condición">
</picture>
En la etiqueta source, hemos puesto dos archivos de imagen separados por una coma y detrás de la segunda imagen hemos escrito 2x. Esto se interpretará de la siguiente forma, si el dispositivo es capaz de mostrar imágenes de resolución 2x (alta resolución) se mostrará la segunda imagen, en otro caso se mostrará la primera imagen.
Es decir, se muestra la imagen de la máxima resolución que es capaz de mostrar el dispositivo.
La unidad x es un descriptor de densidad de pixels que se suele expresar como el device-pixel-ratio para dispositivos móviles. Se define device-pixel-ratio es el cociente entre los pixels físicos y los dips (device-independent pixels).
En la práctica en los ordenadores portátiles vale 1, en los dispositivos móviles varía entre 1 y 3, según la resolución (por ejemplo, 2 para iPhone 6, Nexus4; 3 para iPhone X, Nexus 5).
La resolución estándar se indica como 1x, alta resolución 2x y muy alta resolución por 3x. Aunque también se pueden utilizar valores intermedios, 1.25, 1.5, ... y otras formas de especificar la resolución (dpi).
El nivel de zoom aplicado a la pantalla también influye en la resolución.
Resumiendo, como puedes ver la nueva etiqueta picture ofrece muchas posibilidades, se pueden combinar distintas condiciones (ancho, alto, orientación, ...) para conseguir mostrar la imagen adecuada a cada situación.
Para practicar lo aprendido realiza el ejercicio Etiqueta <picture>
Cursos Informática Gratuitos Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.