Etiqueta HTML <picture>

El elemento <picture> es un contenedor para uno o más elementos <source> y un elemento <img>, que es el último elemento hijo del bloque.

El elemento <source> contiene versiones de una imagen para distintos escenarios de dispositivos de visualización. El elemento <img> describe el tamaño de la imagen y otros atributos. El navegador considera cada uno de los elementos <source> hijos y carga la imagen más adecuada. Si no se encuentra ninguna coincidencia, el navegador muestra la imagen especificada por la etiqueta <img>.

El elemento <picture> permite especificar múltiples imágenes para adaptarse mejor a distintos tamaños de viewport, evitando la necesidad de escalar una sola imagen. Se puede utilizar para los siguientes propósitos:

recortar y modificar imágenes según distintas condiciones de medios,
ofrecer formatos de imagen alternativos cuando ciertos formatos no están soportados.

Nota: Las propiedades object-position y object-fit se aplican al elemento de respaldo <img> para controlar su tamaño y alineación dentro del contenedor.

La etiqueta <picture> es nueva en HTML5.

Sintaxis

La etiqueta <picture> va en pares. El contenido se escribe entre las etiquetas de apertura (<picture>) y cierre (</picture>).

Etiqueta HTML <picture>

<picture>
  <source media="...">
  <source media="...">
  <img src="...">
</picture>

Ejemplo de la etiqueta HTML `<picture>`:

Etiqueta HTML <picture>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <picture>
      <source media="(min-width: 650px)" srcset="https://api.w3docs.com/uploads/media/news_gallery/0001/01/thumb_348_news_gallery_list.jpeg" />
      <source media="(min-width: 430px)" srcset="https://api.w3docs.com/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg" />
      <img src="https://api.w3docs.com/uploads/media/news_gallery/0001/01/thumb_366_news_gallery_list.jpeg" alt="Cityscape at sunset" style="width:auto;" />
    </picture>
    <p>Some information about pictures</p>
  </body>
</html>

Pruébalo tú mismo »

El navegador evalúa los elementos <source> en orden y carga el primero cuya consulta media coincide con el viewport actual. Si ningún <source> coincide, recurre al elemento <img>. El elemento <picture> tiene soporte amplio en todos los navegadores modernos.

El atributo alt en el elemento de respaldo <img> es obligatorio: cualquiera que sea la imagen que el navegador finalmente renderice, usa ese único texto alt. Escribe siempre una descripción del contenido real de la imagen, no un marcador de posición como alt="img".

Dos funciones de <picture>

<picture> resuelve dos problemas distintos, y se elige la técnica según el atributo que se coloca en los elementos <source>:

Dirección de arte — mostrar un recorte o composición diferente según el viewport. Una imagen panorámica en escritorio, un recorte vertical ajustado en móvil. Se usa el atributo media (una consulta CSS de medios) para elegir la imagen correcta.
Negociación de formato — servir la misma imagen en un formato más moderno y pequeño cuando el navegador lo soporta (AVIF o WebP), con respaldo a JPEG/PNG en los demás casos. Se usa el atributo type (un tipo MIME) para que el navegador omita los formatos que no puede decodificar.

El navegador recorre la lista de <source> de arriba hacia abajo y usa el primero que tanto coincide (su consulta media, si la tiene) como es soportado (su type, si lo tiene). El orden importa: coloca la opción más preferida primero.

Cambio de formato (AVIF, luego WebP, luego JPEG)

Este es el uso más común en el mundo real de <picture>. Los navegadores modernos que entienden AVIF descargan el archivo más pequeño; los más antiguos recurren a WebP, y el resto obtiene el JPEG universalmente soportado. El navegador carga exactamente una imagen.

<picture>
  <source type="image/avif" srcset="photo.avif" />
  <source type="image/webp" srcset="photo.webp" />
  <img src="photo.jpg" alt="A red fox standing in fresh snow" />
</picture>

Dado que los elementos <source> solo llevan un type, a todos los navegadores se les ofrecen los tres — simplemente eligen el primer formato que pueden decodificar. No hay consultas de medios involucradas aquí; esto es puramente sobre el formato del archivo.

Dirección de arte (recortes diferentes con `media`)

Aquí el objetivo es cambiar cuál imagen se muestra, no solo su formato. En pantallas de 800px o más, el navegador recibe un recorte de banner ancho; las pantallas más estrechas reciben un recorte cuadrado que mantiene el sujeto legible en un teléfono.

<picture>
  <source media="(min-width: 800px)" srcset="hero-wide.jpg" />
  <source media="(max-width: 799px)" srcset="hero-square.jpg" />
  <img src="hero-square.jpg" alt="Team celebrating a product launch" />
</picture>

Usa media siempre que el contenido de la imagen deba diferir entre puntos de quiebre.

Cambio de resolución con `srcset` y `sizes`

Si solo necesitas la misma imagen en distintos tamaños de píxeles — sin un recorte o formato diferente — generalmente no necesitas <picture>. Un único <img> con srcset y sizes permite al navegador elegir la mejor resolución para la pantalla, el viewport y la densidad de píxeles del dispositivo:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="A red fox standing in fresh snow"
/>

Cómo interpretar esto:

srcset lista las imágenes candidatas, cada una etiquetada con un descriptor de ancho (400w significa que el archivo tiene 400px de ancho). El navegador conoce el ancho real de cada archivo sin descargarlo.
sizes le indica al navegador con qué ancho se mostrará la imagen. Aquí se lee: "por debajo de 600px de viewport, la imagen ocupa todo el ancho (100vw); de lo contrario, ocupa la mitad (50vw)." El navegador combina esto con la relación de píxeles del dispositivo para elegir el candidato más eficiente de srcset.
src permanece como respaldo para los navegadores que ignoran srcset.

srcset con descriptores de ancho también funciona dentro de un elemento <source>, por lo que se puede combinar el cambio de resolución con la dirección de arte o el cambio de formato.

¿Cuándo necesitas realmente `<picture>`?

Objetivo	Usar
La misma imagen, dejar que el navegador elija la mejor resolución para la pantalla	`<img srcset>` + `sizes`
La misma imagen en un formato moderno más pequeño (AVIF/WebP) con respaldo	`<picture>` + `type`
Un recorte/composición diferente por punto de quiebre (dirección de arte)	`<picture>` + `media`

Regla general: recurre a <picture> solo cuando necesitas controlar qué archivo usa el navegador (formato o recorte). Para simplemente "servir el tamaño correcto", <img srcset> es más sencillo y suficiente.

Atributos

Estos atributos se aplican a los elementos <source> dentro de <picture>:

Atributo	Valor	Descripción
media	media_query	Especifica una consulta de medios para coincidir con el tamaño del viewport.
srcset	URL	Especifica la URL de la imagen que se usará en distintas situaciones.
sizes	length	Especifica el ancho de la imagen para distintos tamaños de viewport.
type	MIME_type	Especifica el tipo MIME del recurso enlazado (p. ej., `image/webp`).
src	URL	Especifica la URL de la imagen. Se usa como alternativa a `srcset`.

Cada elemento <source> debe incluir un atributo srcset o src. El elemento de respaldo <img> usa el atributo src.

La etiqueta <picture> admite los Atributos globales.

Práctica

¿Qué hace el elemento HTML picture?

Inserta contenido de audio en un documento.Define un contenedor para varios candidatos de fuente y una imagen de respaldo, permitiendo al navegador cargar la imagen más adecuada para el dispositivo, el tamaño de pantalla o el formato soportado.Solo funciona para gráficos vectoriales como SVG.Crea automáticamente un hipervínculo alrededor de una imagen.

Sintaxis

Ejemplo de la etiqueta HTML <picture>: