La etiqueta «picture» en HTML

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.


Avatar de Edu Lazaro

Edu Lázaro: Ingeniero técnico en informática, actualmente trabajo como desarrollador web y programador de videojuegos.

👋 Hola! Soy Edu, me encanta crear cosas y he redactado esta guía. Si te ha resultado útil, el mayor favor que me podrías hacer es el de compatirla en Twitter 😊

Si quieres conocer mis proyectos, sígueme en Twitter.

1 comentario en “La etiqueta «picture» en HTML

  1. Excelente post. Muy claro, conciso y bien presentado. Tengo una duda. Si bien utilizar imágenes de menor tamaño en pantallas pequeñas por ejemplo nos ayuda al momento de optimizar el performance de la web, vale la pena tener muchas imágenes iguales de diferente tamaño? No sería demasiado pesada la carpeta? O al dejar elegir al navegador cual usar no importa tanto esto? Muchas gracias!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

“- Hey, Doc. No tenemos suficiente carretera para ir a 140/h km. - ¿Carretera? A donde vamos, no necesitaremos carreteras.”