Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

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 entre 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 imágen ó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 None, both the starting and ending tag are mandatory.
Padres permitidos Cualquer elementos 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 un media query que el agente de usaurio evaluará para seleccionar un elemento <source>. Si el 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

El atributo type permite especificar un tipo MIME para los recursos dados en el atributo srcset del elemento <source>. Si el agente de usauriono 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>

Especificaciones

Specification Status Comment
HTML Living Standard
La definición de '<picture>' en esta especificación.
Living Standard Initial definition

Compatibilidad de navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 38 13 38 (38) Sin soporte 25 9.1
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 38 (Yes) 38.0 (38) Sin soporte 25 iOS 9.3

Ver también

Etiquetas y colaboradores del documento

Colaboradores en esta página: IsraelFloresDGA, diegos2
Última actualización por: IsraelFloresDGA,