<picture>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2016.

Experimental: Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

El elemento HTML <picture> es un contenedor usado para especificar múltiples elementos <source> y un elemento <img> contenido en él para proveer versiones de una imagen para diferentes escenarios de dispositivos. Si no hay coincidencias con los elementos <source>, el archivo especificado en los atributos src del elemento <img> es utilizado. La imagen seleccionada es entonces presentada en el espacio ocupado por el elemento <img>.

Para seleccionar la imagen óptima, el user agent examina cada atributo srcset, media, y type de la fuente para seleccionar la imagen compatible.

El navegador escogerá la fuente más apropiada de acuerdo al diseño de la página (las limitaciones de la caja donde aparecerá la imagen) y el dispositivo que se utilize para visualizarla (p.ej. pantalla normal o hiDPI).

Categorías de contenido Flujo de contenido, contenido textual o estático, contenido incrustado
Contenido permitido Cero o más elementos <source>, seguidos por un elemento <img>, mezclados opcionalmente con elementos script-supporting.
Omisión de etiquetas Ninguna, tanto la etiqueta inicial como la final son obligatorias.
Padres permitidos Cualquier elemento que permita embeber contenido.
ARIA roles permitidos Ninguno.
DOM interface HTMLPictureElement

Atributos

Este elemento sólo incluye atributos globales.

Notas de uso

Se puede usar la propiedad object-position para ajustar la posición de la imagen dentro del marco del elemento, y la propiedad object-fit para controlar como el tamaño de la imagen se ajusta para adaptarse al marco.

Ejemplos

Estos ejemplos demuestran los efectos que tienen diferentes atributos del atributo <source> en la selección de la imagen a desplegar cuando se usa dentro de <picture>.

El atributo media

El atributo media permite especificar una media query que el agente de usuario evaluará para seleccionar un elemento <source>. Si la media query evalua a false, el elemento <source> es omitido.

html
<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN" />
</picture>

El atributo type

El atributo type permite especificar un tipo MIME para los recursos dados en el atributo srcset del elemento <source>. Si el agente de usuario no soporta dicho tipo, el elemento <source> es omitido.

html
<picture>
  <source srcset="mdn-logo.svg" type="image/svg+xml" />
  <img src="mdn-logo.png" alt="MDN" />
</picture>

Especificaciones

Specification
HTML Standard
# the-picture-element

Compatibilidad con navegadores

BCD tables only load in the browser

Ver también