<picture>

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).

Este elemento sólo incluye atributos globales.

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.

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 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.

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

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.

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

• Elemento <img>
• Elemento <source>
• Posicionando y redimensionando la imagen dentro de su marco: object-position y object-fit