El elemento de imagen

En el módulo anterior, se demostró cómo el atributo srcset te permite proporcionar versiones de diferentes tamaños de la misma imagen. Luego, el navegador puede decidir cuál es la versión correcta para usar. Si quieres cambiar la imagen por completo, necesitarás el elemento picture.

Del mismo modo en que srcset se basa en el atributo src, el elemento picture se basa en el elemento img. El elemento picture se une a un elemento img.

<picture>
  <img src="image.jpg" alt="A description of the image.">
</picture>

Si no hay un elemento img anidado dentro del elemento picture, este último no funcionará.picture

Al igual que el atributo srcset, el elemento picture actualizará el valor del atributo src en ese elemento img. La diferencia es que, mientras que el atributo srcset brinda sugerencias al navegador, el elemento picture proporciona comandos. Esto te da control.

source

Puedes especificar varios elementos source dentro de un elemento picture, cada uno con su propio atributo srcset. Luego, el navegador ejecuta la primera que puede.

Formatos de imagen

En este ejemplo, hay tres imágenes diferentes en tres formatos diferentes:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="A description of the image."
    width="300" height="200">
</picture>

El primer elemento source apunta a una imagen en el nuevo formato AVIF. Si el navegador puede renderizar imágenes AVIF, ese será el archivo de imagen que elija. De lo contrario, pasa al siguiente elemento source.

El segundo elemento source apunta a una imagen en formato WebP. Si el navegador puede renderizar imágenes WebP, usará ese archivo de imagen.

De lo contrario, el navegador recurrirá al archivo de imagen en el atributo src del elemento img. Esa imagen es un JPEG.

Esto significa que puedes comenzar a usar formatos de imagen nuevos sin sacrificar la compatibilidad con versiones anteriores.

En ese ejemplo, el atributo type le indicó al navegador qué tipo de formato de imagen se especificó.

Tamaños de las imágenes

Además de cambiar entre formatos de imagen, puedes cambiar entre tamaños de imagen. Usa el atributo media para indicarle al navegador qué tan ancha se mostrará la imagen. Coloca una consulta de medios dentro del atributo media.

<picture>
  <source srcset="large.png" media="(min-width: 75em)">
  <source srcset="medium.png" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image."
    width="300" height="200">
</picture>

Aquí le indicas al navegador que, si el ancho del viewport es mayor que 75em, debe usar la imagen grande. Entre 40em y 75em, el navegador debe usar la imagen mediana. Debajo de 40em, el navegador debe usar la imagen pequeña.

Esto es diferente a usar los atributos srcset y sizes en el elemento img. En ese caso, le proporcionas sugerencias al navegador. El elemento source se parece más a un comando que a una sugerencia.

También puedes usar el descriptor de densidad de píxeles dentro del atributo srcset de un elemento source.

<picture>
  <source srcset="large.png 1x" media="(min-width: 75em)">
  <source srcset="medium.png 1x, large.png 2x" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image." width="300" height="200"
    srcset="small.png 1x, medium.png 2x, large.png 3x">
</picture>

En ese ejemplo, sigues indicándole al navegador qué hacer en diferentes puntos de interrupción, pero ahora el navegador tiene la opción de elegir la imagen más adecuada para la densidad de píxeles del dispositivo.

Recorte

Si solo necesitas publicar versiones de diferentes tamaños de la misma imagen, srcset es la mejor opción. Sin embargo, si una imagen no se ve bien en tamaños más pequeños, puedes intentar crear una versión recortada.

Las diferentes imágenes pueden tener diferentes relaciones de ancho y alto para adaptarse mejor a su contexto. Por ejemplo, en un navegador para dispositivos móviles, es posible que desees publicar un recorte estrecho y alto, mientras que, en un navegador para computadoras, es posible que desees publicar un recorte ancho y corto.

Este es un ejemplo de una imagen hero que cambia su contenido y su forma según el ancho del viewport. Agrega los atributos width y height a cada elemento source.

<picture>
  <source srcset="full.jpg" media="(min-width: 75em)" width="1200" height="500">
  <source srcset="regular.jpg" media="(min-width: 50em)" width="800" height="400">
  <img src="cropped.jpg" alt="A description of the image." width="400" height="400" fetchpriority="high">
</picture>

Recuerda que no puedes cambiar el atributo alt según la fuente de la imagen. Deberás escribir un atributo alt que describa tanto la imagen de tamaño completo como la imagen recortada.

Probablemente no necesites usar el elemento picture para la mayoría de tus imágenes responsivas, ya que los atributos srcset y sizes del elemento img abarcan muchos casos de uso. Sin embargo, para aquellas situaciones en las que necesitas un control más detallado, el elemento picture es una herramienta poderosa.

Hay un tipo de imagen en la que es posible que no necesites ninguna de las dos soluciones: los íconos. Eso es lo que sigue.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre el elemento "picture"