los contiene cero o más elementos y uno

elemento para ofrecer versiones alternativas de una imagen para diferentes escenarios de pantalla / dispositivo.

El navegador considerará a cada niño elemento y elija la mejor combinación entre ellos. Si no se encuentran coincidencias, o el navegador no es compatible con elemento: la URL del elementos src attribute está seleccionado. A continuación, la imagen seleccionada se presenta en el espacio ocupado por el elemento.

Para decidir qué URL cargar, el agente de usuario examina cada uno ‘s srcset, media, y type attributes para seleccionar una imagen compatible que mejor se adapte al diseño y las capacidades actuales del dispositivo de visualización.

los elemento tiene dos propósitos:

  1. Describe el tamaño y otros attributes de la imagen y su presentación.
  2. Proporciona un respaldo en caso de que ninguno de los ofrecidos Los elementos pueden proporcionar una imagen utilizable.

Casos de uso común para :

  • Dirección artística. Recortar o modificar imágenes para diferentes media condiciones (por ejemplo, cargar una versión más simple de una imagen que tiene demasiados detalles, en pantallas más pequeñas).
  • Ofreciendo formatos de imagen alternativos, para los casos en los que no se admiten determinados formatos.

    Nota: Por ejemplo, formatos más nuevos como AVIF o WEBP tienen muchas ventajas, pero es posible que no sean compatibles con el navegador. Puede encontrar una lista de formatos de imagen compatibles en: Tipo de archivo de imagen y guía de formato.

  • Ahorro de ancho de banda y aceleración de los tiempos de carga de la página cargando la imagen más apropiada para la visualización del espectador.

Si proporciona versiones de mayor densidad de una imagen para una pantalla de alta DPI (Retina), utilice srcset sobre el elemento en su lugar. Esto permite a los navegadores optar por versiones de menor densidad en los modos de ahorro de datos, y no es necesario que escriba explícitamente media condiciones.

Categorías de contenido Contenido de flujo, contenido de redacción, contenido incrustado
Contenido permitido Cero o más elementos, seguidos de uno elemento, opcionalmente entremezclado con elementos de soporte de script.
Omisión de etiqueta Ninguno, tanto la etiqueta inicial como la final son obligatorias.
Padres permitidos Cualquier elemento que permita contenido incrustado.
Rol de ARIA implícito Sin rol correspondiente
Roles ARIA permitidos No role permitido
Interfaz DOM HTMLPictureElement

Atributos

Este elemento incluye solo global attributes.

Notas de uso

Puedes usar el object-position propiedad para ajustar el posicionamiento de la imagen dentro del marco del elemento, y la object-fit propiedad para controlar cómo se cambia el tamaño de la imagen para que quepa dentro del marco.

Nota: Utilice estas propiedades en el niño elemento, no los elemento.

Ejemplos de

Estos ejemplos demuestran cuán diferentes attributes de El elemento cambiar la selección de la imagen dentro .

Los medios de comunicación attribute

los media attribute especifica una condición de medios (similar a una consulta de medios) que el agente de usuario evaluará para cada elemento.

Si el La condición del medio se evalúa como false, el navegador lo omite y evalúa el siguiente elemento dentro .

<picture><sourcesrcset="mdn-logo-wide.png"media="(min-width: 600px)"><imgsrc="mdn-logo-narrow.png"alt="MDN">picture>

El srcset attribute

los srcset attribute se utiliza para ofrecer una lista de posibles imágenes basado en el tamaño.

Se compone de una lista de descriptores de imágenes separados por comas. Cada descriptor de imagen se compone de una URL de la imagen y cualquiera…

  • a descriptor de ancho, seguido de un w (tal como 300w);
    O
  • a descriptor de densidad de píxeles, seguido de un x (tal como 2x) para ofrecer una imagen de alta resolución para pantallas de alta resolución por pulgada.
<picture><sourcesrcset="logo-768.png 768w, logo-768-1.5x.png 1.5x"><sourcesrcset="logo-480.png, logo-480-2x.png 2x"><imgsrc="logo-320.png"alt="logo">picture>

El tipo attribute

los type attribute especifica un Tipo de Mimica para las URL del recurso en el elementos srcset attribute. Si el agente de usuario no admite el tipo dado, el se omite el elemento.

<picture><sourcesrcset="logo.webp"type="image/webp"><imgsrc="logo.png"alt="logo">picture>

Especificaciones

Especificación Estado Comentario
Estándar de vida HTML
La definición de ‘‘en esa especificación.		 Estándar de vida Definición inicial

Compatibilidad del navegador

Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
picture 38 13 38 No 25 9.1 38 38 38 25 9.3 3,0

Ver también