Etiqueta PICTURE

La tag <picture> permite a los desarrolladores especificar múltiples fuentes de imagen para diferentes dispositivos y resoluciones de pantalla, para que el navegador pueda elegir la imagen adecuada en función de las capacidades del dispositivo del usuario.

<picture>
  <source srcset="image-small.jpg" media="(max-width: 768px)">
  <source srcset="image-medium.jpg" media="(max-width: 1024px)">
  <source srcset="image-large.jpg">
  <img src="image-default.jpg" alt="Descripción de la imagen">
</picture>

Para cada imagen debe especificarse un texto alternativo a través del atributo alt.

Dentro del tag <picture> se encuentran uno o más elementos <source> y un <img>. Cada <source> contiene atributos que indican diferentes fuentes de imagen con diferentes parámetros, como tamaño, resolución o tipo de archivo. El navegador utiliza estas fuentes para seleccionar la imagen más adecuada que coincida con las características actuales del dispositivo y la muestra. Si ninguno de los elementos <source> cumple con las condiciones, se utiliza el tag <img> con su imagen original.

Ejemplo

<picture>
  <source srcset="320.jpg" media="(max-width: 800px)">
  <img src="640.jpg" alt="Imagen abstracta">
</picture>

¿Cómo Funciona?

Una misma página puede abrirse en diferentes dispositivos y en ventanas de navegador de diferentes anchos. Un teléfono tiene una pantalla pequeña y sería genial no cargar imágenes de gran tamaño con alta resolución. En CSS, podemos cambiar el fondo de un elemento (background-image) en función del ancho de la pantalla utilizando expresiones de medios. Pero si la imagen es de contenido, insertada en HTML mediante el tag <img>, CSS ya no nos ayudará. Tenemos que utilizar los tags <picture> y <source>.

¿Cómo se Escribe?

Dentro del tag <picture> debe estar el tag <img>, y opcionalmente, los tags <source>.

<picture>
  <source srcset="750x100.png" media="(min-width: 1000px)">
  <img src="650x100.png" alt="Imagen con dimensiones">
</picture>

El navegador analiza cada tag <source> en orden, se detiene en el primero que coincida con las condiciones actuales y muestra la imagen del atributo srcset. Los demás tags <source> no se analizan. Si el tag <picture> no es compatible con el navegador o ninguno de los tags <source> cumple con las condiciones, se muestra la imagen del tag <img>.

Ejemplo Gráfico

En este ejemplo, utilizando el atributo media en el tag <source> establecemos una condición similar a la de las expresiones de medios @media en CSS. Si la condición se determina como falsa, el elemento <source> se omite. La diferencia se hace evidente al cambiar el tamaño de la ventana del navegador.

En este ejemplo, los usuarios con pantallas normales verán una imagen etiquetada como 750×100. Los usuarios con pantallas retina verán una imagen etiquetada como 1500×200.

Sugerencias

• Si la expresión de medios no funciona, el navegador no carga la imagen para ella. Así que no te preocupes en escribir tantas condiciones como sea necesario.
• El tag <picture> no es un contenedor de bloque completo, como <div>, por lo que los estilos deben aplicarse al tag <img> en su interior.
• Trata de preparar siempre varias versiones de la misma imagen para mostrarla en diferentes dispositivos al diseñar. Los usuarios de teléfonos móviles te agradecerán mucho si preparas imágenes de menor resolución para ellos. Al mismo tiempo, a los usuarios de computadoras de escritorio con pantallas de alta definición se les pueden mostrar imágenes con una resolución mayor:

Uno de los errores más comunes al trabajar con el tag <picture> es olvidar el tag <img>. Recuerda que el navegador muestra la imagen exclusivamente mediante el tag <img>, y los tags <source> solo ayudan a elegir la URL correcta de la imagen para las condiciones actuales. Por lo tanto, si no hay un tag <img> dentro de <picture>, el navegador no tendrá nada que mostrar.

Finalmente, utiliza todas las expresiones de medios disponibles al máximo.

<picture>
  <!-- Imagen para el tema oscuro -->
  <source srcset="image-dark.png" media="(prefers-color-scheme: dark)">
  <!-- Imagen por defecto para el tema claro -->
  <img src="image-light.png" alt="">
</picture>

No es necesario limitarse solo a los tamaños de las imágenes para móviles y PC. Puedes utilizar expresiones de medios para determinar el tema oscuro en el dispositivo del usuario y reemplazar la imagen, haciendo la interfaz más agradable a la vista.

No olvides en compartir este artículo.