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 en el bloque.

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

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

recortar y modificar imágenes para diferentes condiciones de medios,
ofrecer formatos de imagen alternativos cuando no se admiten formatos específicos.

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> se escribe en pares. El contenido se escribe entre las etiquetas de apertura (<picture>) y cierre (</picture>).

Etiqueta HTML <picture>

html

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

Ejemplo de la etiqueta HTML `<picture>`:

Etiqueta HTML <picture>

html

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

Try it Yourself »

El navegador evalúa los elementos <source> en orden y carga el primero cuya consulta media coincida con el viewport actual. Si ningún <source> coincide, se utiliza el elemento <img> como respaldo. El elemento <picture> es ampliamente compatible con todos los navegadores modernos.

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 a utilizar en diferentes situaciones.
sizes	length	Especifica el ancho de la imagen para diferentes tamaños de viewport.
type	MIME_type	Especifica el tipo MIME del recurso vinculado (p. ej., `image/webp`).
src	URL	Especifica la URL de la imagen. Se utiliza como alternativa a `srcset`.

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

La etiqueta <picture> admite los Atributos Globales.

Práctica

¿Cuál es la función de la etiqueta HTML <picture>?

Se utiliza para incrustar contenido de audio en documentos.Define un contenedor para múltiples elementos <source> y un elemento <img> para ofrecer la imagen más adecuada según los diferentes dispositivos o tamaños de pantalla.Solo funciona para gráficos vectoriales.Crea automáticamente un hipervínculo.Tiene una opción de respaldo integrada; si ninguna de las etiquetas source puede proporcionar una coincidencia, se utilizará la etiqueta <img> dentro de la etiqueta <picture>.

Etiqueta HTML <picture> ​

Sintaxis ​

Ejemplo de la etiqueta HTML <picture>: ​

Atributos ​

Práctica ​

Etiqueta HTML `<picture>`

Sintaxis

Ejemplo de la etiqueta HTML `<picture>`:

Atributos

Práctica