La etiqueta «picture» en HTML

En este tutorial aprenderás los conceptos básicos de la etiqueta «picture» de HTML, utilizada para mostrar imágenes. Es una etiqueta relativamente reciente, aunque ya es soportada por la mayor parte de los navegadores, a excepción de Internet Explorer.

Uso básico de la etiqueta «picture»

La etiqueta «picture» es similar al atributo srcset de la etiqueta «img» de HTML. La etiqueta picture se utiliza cuando quieres mostrar diferentes imágenes en lugar de mostrar diferentes tamaños de la misma imagen. Del mismo modo, también podrías querer mostrar la misma imagen, pero en otros formatos, algo habitual cuando incluyes una imagen en un formato que todavía no está demasiado extendido.

Por ejemplo, a día de hoy es ya bastante habitual el uso del formato WebP para imágenes, aunque todavía no está totalmente soportado por todos los navegadores. En este caso, podrías usar la etiqueta picture y especificar una lista de imágenes que serán utilizadas según el orden en el que se encuentren en la lista. Aquí tienes un ejemplo:

<picture>
    <source type="image/webp" srcset="imagen.webp">
    <img src="imagen.png" alt="Una imagen">
</picture>

En este ejemplo, la imagen en formato WebP será usada por los navegadores que la soporten. En caso de que un navegador no soporte este formato, usará la siguiente imagen de la lista, que en este ejemplo está en formato PNG. Ene general, las imágenes que se incluyen en el interior de la etiqueta picture suelen especificarse mediante la etiqueta source. Sin embargo, hemos usado la etiqueta img como última instancia, en caso de que el navegador no soporte la etiqueta picture ni los elementos source de su interior.

Imágenes responsivas con «media»

También es posible agregar media queries en la etiquetas source gracias al atributo media. Aquí tienes un ejemplo:

<picture>
    <source media="(min-width: 600w)" srcset="persona-600.jpg" sizes="100vw">
    <source media="(min-width: 900w)" srcset="persona-900.jpg" sizes="100vw">
    <source media="(min-width: 1200w)" srcset="persona-1200.jpg" sizes="800px">
    <img src="persona.jpg" alt="Imagen de una persona">
</picture>

Hemos agregado la condición necesaria para que cada una de las imágenes se muestre. Veamos cada una de ellas:

1. La imagen persona-600.jpg se mostrará cuando la pantalla del usuario tenga un mínimo de 600px de ancho, tal y como indicamos mediante el atributo media (min-width: 600w). Además, la imagen ocupará el 100% de la pantalla, tal y como indicamos mediante el valor 100vw de la etiqueta sizes.
2. La siguiente imagen tiene una prioridad superior a la primera, por lo que la imagen persona-900.jpg se mostrará cuando la pantalla del usuario tenga un mínimo de 900px de ancho, tal y como indicamos en con el atributo media (min-width: 900w). Además, la imagen ocupará el 100% de la pantalla, tal y como indicamos mediante el valor 100vw de la etiqueta sizes.
3. La siguiente imagen tiene una prioridad superior  a las dos anteriores, por lo que la imagen persona-1200.jpg se mostrará cuando la pantalla del usuario tenga un mínimo de 1200px de ancho, tal y como indicamos en con el atributo media (min-width: 1200w). Además, la imagen ocupará 800px de ancho, tal y como indicamos mediante la etiqueta sizes.
4. Si el ancho de la pantalla del usuario es menor a 600px o si el navegador no soporta la etiqueta picture, se usará la imagen persona.jpg, que es la que se usa por defecto.

Y esto ha sido todo. Si quieres, puedes consultar cómo utilizar la etiqueta img en HTML.

---