Lo más normal en diseño adaptable es mostrar una imagen u otra según la anchura de la pantalla, en este enlace puedes ver un ejemplo:
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_mediana_600.jpg">
<source media="(max-width: 600px)" srcset="graficos/en_rio_pequenya_300.jpg"> <img src="graficos/por_si_acaso.jpg" alt="Si no se cumple ninguna condición">
</picture>
Hemos utilizado tres condiciones referentes al ancho de la ventana para mostrar una imagen según estemos en una pantalla grande, mediana o pequeña.
La condición de la primera etiqueta source, min-width: 800px se cumplirá si la pantalla tiene, como mínimo 800 px. de ancho, es decir si la anchura es mayor o igual a 800 px. Si es así se mostrará la imagen en_rio_grande_800.jpg. Si no es así, se pasará a la siguiente etiqueta source que pregunta si la anchura es mayor o igual a 600 px., por lo tanto si la anchura está entre 799 px. y 600 px., se mostrará la imagen en_rio_mediana_600.jpg
Si no se cumple se pasará a la siguiente etiqueta source, que contiene la condición max-width: 600px que será cierta si la pantalla tiene como máximo 600 px, es decir si la pantalla es menor o igual de 600 px., en ese caso se mostrará la imagen en_rio_pequenya_300.jpg (Hubiese sido más correcto poner max-width: 599px)
Si no se cumple ninguna condición se ejecutaría la etiqueta img y se mostraría la imagen por_si_acaso.jpg
En este caso, siempre se va a cumplir alguna de las condiciones de las etiquetas source, la primera si el ancho >= 800, la segunda si el ancho está entre 799 y 600, y la tercera en el resto de casos, ancho < 599. Por lo tanto la etiqueta img no se ejecutará nunca. si queremos utilizar esta etiqueta como un caso posible más, podemos modificar la etiqueta de picture para que quede más compacta y produzca el mismo resultado.
<picture>
<source media="(min-width: 800px)" srcset="graficos/en_rio_grande_800.jpg">
<source media="(min-width: 600px)" srcset="graficos/en_rio_mediana_600.jpg">
<img src="graficos/en_rio_pequenya_300.jpg" alt="Si es menor de 600 px">
</picture>
Ahora si la anchura no es >= 800, y la anchura no es >= 600, es decir, es menor de 599, se ejecutará la etiqueta img y se mostrará en_rio_pequenya_300.jpg
Aunque, teóricamente, parece más claro abarcar todos los casos con las etiquetas source, y dejar la etiqueta img para el caso en que se produzca alguna circunstancia que no habíamos tenido en cuenta.
Obviamente las imágenes deben tener las anchuras correspondientes, la etiqueta picture no modifica el ancho de las imágenes. Según el diseño de nuestra página mostraremos unas imágenes de un tamaño determinado. En este ejemplo, estamos mostrando una imagen con el mismo contenido pero con tamaños y pesos distintos.
Como estamos viendo la etiqueta picture permite mostrar imágenes en función del ancho de la pantalla, esto tiene dos ventajas fundamentales.
1. Mostar la imagen de tamaño adecuado para cada tipo de pantalla. Desde el punto de vista del diseño de la página es una gran ventaja poder adecuar los tamaños de las imágenes al tamaño de la pantalla.
2. Aprovechar mejor el ancho de banda. Si mostramos una imagen pequeña y por lo tanto de poco peso en Kb, en pantallas pequeñas estaremos ahorrando ancho de banda.
Ahora vamos a comparar la etiqueta picture con la etiqueta img que como decíamos al principio de este artículo, es otra forma de mostrar imágenes en diseños adaptables. Recordemos ese código.
<img src="graficos/en_rio_grande_800.jpg" alt="Pendientes" style="max-width: 100%; height: auto;">
Con este código conseguimos que la imagen se ajuste al tamaño de la pantalla pero no estamos aprovechando bien el ancho de banda ya que si queremos que la imagen se vea bien en pantallas grandes, deberá ser una imagen grande y pesada, y por lo tanto estaremos desaprovechando ancho de banda cuando se vea en pantallas pequeñas.
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 mostar 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.
En este enlace puedes ver otro ejemplo basado en la imagen del río que estamos utilizando:
Cursos Informática Gratuitos Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.