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 a usar. Si deseas cambiar la imagen por completo, necesitarás el elemento picture.

De la misma manera 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, el elemento picture no funcionará.

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

source

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

Formatos de imagen

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

<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" loading="lazy" decoding="async">
</picture>

El primer elemento source apunta a una imagen en el nuevo formato AVIF. Si el navegador puede renderizar imágenes AVIF, se elige ese archivo de imagen. De lo contrario, continúa con el 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 nuevos formatos de imagen sin sacrificar la retrocompatibilidad.

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

Tamaños de las imágenes

Además de alternar entre los formatos de imagen, puedes cambiar entre los tamaños de imagen. Usa el atributo media para indicarle al navegador el ancho de 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" loading="lazy" decoding="async">
</picture>

Aquí le indicas al navegador que, si el ancho del viewport es más ancho 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, estarás proporcionando sugerencias al navegador. El elemento source es más como un comando que como 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" loading="lazy" decoding="async"
    srcset="small.png 1x, medium.png 2x, large.png 3x">
</picture>

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

En recortes

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

Las diferentes imágenes pueden tener distintas relaciones de ancho y altura para adaptarse mejor a su contexto. Por ejemplo, en un navegador para dispositivos móviles, es posible que desees publicar un recorte que sea angosto y alto, mientras que en un navegador de computadora de escritorio, tal vez quieras publicar un recorte ancho y corto.

A continuación, se incluye un ejemplo de una imagen hero que cambia su contenido y forma en función del ancho de la 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" loading="eager" decoding="sync">
</picture>

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

Es probable que 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, en esas situaciones en las que necesitas un control más detallado, el elemento picture es una herramienta potente.

Hay un tipo de imagen para el que quizás no necesites ninguna solución: los íconos. Estos son los próximos pasos.

Verifica tus conocimientos

Pon a prueba tu conocimiento sobre el elemento de imagen