Unidad 5. Imágenes (VII)

5.9. Etiqueta <picture>. Distintas escenas según la anchura

Hasta ahora estamos suponiendo que lo que nos interesa es mostrar una misma escena pero utilizando tres archivos de imagen de distintas dimensiones para ajustarnos al ancho de la pantalla y aprovechar el ancho de banda, pero existe otra posibilidad muy interesante para algunos casos.

Con la etiqueta picture podemos mostrar escenas distintas según la anchura de la pantalla. Por ejemplo, si estamos diseñando un catálogo de joyas o pendientes, en el caso de una pantalla grande podemos mostrar una imagen donde se vea la cara completa de una modelo luciendo el pendiente, y para pantallas pequeñas mostrar una imagen donde solo se vea la parte de la oreja con el pendiente, ya que lo que nos interesa es que siempre se vea bien el pendiente.

Para un catálogo de coches podemos mostrar el coche en un paisaje bonito si disponemos de una pantalla grande y mostrar un primer plano del coche en una pantalla pequeña. Esto son solo dos ejemplos pero hay muchas más situaciones en las que puede ser muy interesante mostrar escenas distintas según el tamaño u orientación de la pantalla.

Vamos a ver un ejemplo de diseño adaptable que muestra una imagen u otra según la anchura de la pantalla, en este enlace puedes ver el ejemplo: Etiqueta picture con diferentes escenas .

y este es el código empleado:

 <picture>
  <source media="(min-width: 800px)" srcset="graficos/en_rio_grande_800.jpg">
  <source media="(min-width: 600px)" srcset="graficos/en_rio_zomm_600.jpg">
  <source media="(max-width: 600px)" srcset="graficos/en_rio_zomm_300.jpg">
 
   <img src="graficos/por_si_acaso.jpg" alt="Si no se cumple ninguna condición">
</picture>
    
  

Hay que tener en cuenta que las dimensiones en pixels dadas por los fabricantes de dispositivos móviles están afectadas por la resolución física del dispositivo. Por ejemplo un iPhone X tiene una resolución física de 1125x 2436 pero sus dimensiones en píxeles para CSS son 375x812, es decir que su device-pixel-ratio=3, es decir que para representar un pixel se utilizan tres pixeles físicos.

Esto no sucede con las pantallas de ordenadores de sobremesa o portátiles, donde el device-pixel-ratio=1. Esto explica porque al acercarnos a una pantalla de móvil se ve nítido mientras que al hacerlo a una pantalla de ordenador se ve borroso.

 Cursos Informática Gratuitos