El elemento de imagen

En el módulo anterior, se demostró cómo el atributo srcset te permite proporcionar versiones de la misma imagen en diferentes tamaños. El navegador puede decidir cuál es la versión correcta a usar. Si quieres 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 ningún 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 permite tener el 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 vez que puede.

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 es capaz de renderizar imágenes AVIF, ese es el archivo de imagen que elige. De lo contrario, pasa al siguiente elemento source.

El segundo elemento source apunta a una imagen en formato WebP. Si el navegador es capaz de 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 archivo JPEG.

Esto significa que puedes comenzar a usar formatos de imagen nuevos sin sacrificar la retrocompatibilidad.

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

Tamaños de las imágenes

Además de alternar entre los formatos de imagen, puedes cambiar entre tamaños de imagen. Usa el atributo media para indicarle al navegador el ancho que tendrá 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>

En este caso, 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 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" loading="lazy" decoding="async"
    srcset="small.png 1x, medium.png 2x, large.png 3x">
</picture>

En ese ejemplo, se sigue indicando 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.

Recortes

Si solo necesitas publicar versiones de la misma imagen con distintos 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 hacer una versión recortada.

Las diferentes imágenes pueden tener distintas proporciones de ancho y altura para adaptarse mejor a su contexto. Por ejemplo, en un navegador para dispositivos móviles, es posible que desee publicar un recorte angosto y alto, mientras que en un navegador para computadoras de escritorio, puede publicar un recorte ancho y corto.

A continuación, se muestra un ejemplo de una imagen hero que cambia su contenido y su forma en función del ancho de la ventana de visualización. 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 tanto la imagen en tamaño original como la recortada.

Es probable que no necesites usar el elemento picture para la mayoría de tus imágenes responsivas; los atributos srcset y sizes del elemento img abarcan muchos casos de uso. Sin embargo, para esas 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 quizás no necesite ninguna de las dos soluciones: los íconos. Eso es lo que sigue.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre el elemento Picture