Unidad 5. Imágenes (VI)



5.8. Etiqueta <picture>

La etiqueta picture es la nueva manera de insertar imágenes en una página web de una forma más flexible que con la etiqueta img que ha venido usándose hasta las versión 5.1. de HTML. La etiqueta picture es preferible sobre todo si queremos diseñar páginas web que se adapten a todo tipo de pantallas. Ya que permite mostrar diferentes imágenes en función de varios parámetros, como las dimensiones de la ventana, orientación de la ventana, tipo de imagen y resolución del dispositivo.

Es decir, por ejemplo, podemos mostrar diferentes versiones de una imagen según el ancho de la ventana del navegador con el que se va a visualizar la imagen; así mostraremos una imagen pequeña en un teléfono móvil, una imagen mediana en un tablet y una imagen grande en un ordenador.

El formato genérico de la etiqueta picture es el siguiente:

<picture>
<source media="(condición 1)" srcset="imagen_1.jpg">
...
<source media="(condición n)" srcset="imagen_n.jpg">
<img src="imagen_alt" alt="Si no se cumple ninguna condición">
</picture>

Es obligatoria la etiqueta de apertura <picture> y la de cierre </picture>, entre ambas se pueden colocar tantas etiquetas <source> como se deseen. Antes de la etiqueta de cierre debe ir una etiqueta <img>.

Si se cumple la condición de la primera etiqueta source se mostrará la imagen indicada en esa etiqueta, en caso contrario se evaluará la siguiente etiqueta source, y así sucesivamente. Si no se cumple ninguna condición o el navegador no soporta la etiqueta picture, se mostrará la imagen contenida en la etiqueta img.

Las condiciones se pueden expresar utilizando Media-Queries y pueden hacer referencia a distintos parámetros (anchura, orientación, ...)

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 anchuras .

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, también en el caso que el navegador no soportase la etiqueta picture.

En este ejemplo, 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 (salvo si el navegador no soportase la etiqueta picture) . Si queremos utilizar esta etiqueta img 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>

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. mostrar 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 vimos en el punto anterior, 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.


Enero-2019 (V 2.0)
Pág. 5.6
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.