Elemento picture en HTML

Un elemento html picture es un contenedor que se utiliza para seleccionar múltiples fuentes a través de un elemento <source> para una imagen <img> contenida en él. El navegador elegirá la fuente de imagen más adecuada según el diseño de la página (es decir, el cuadro en el que está contenido este elemento) y el dispositivo en el que se mostrará la imagen (normal o alta resolución).

Ejemplo de uso del elemento <picture> para mostrar una imagen de logotipo amplia si se cumple una determinada condición de consulta de medios (que el ancho sea de al menos 600 píxeles) mediante el uso de la propiedad media con el elemento <source>. Si no cumple con la condición de consulta de medios, el elemento <source> se omitirá y se moverá más allá:

< picture > 
 < source  srcset = "cover-large.webp"  media = "(min-width: 600px)" > 
 < img  src = "cover-small.webp"  alt = "Imagen de portada" > 
</ picture >

Un ejemplo del uso de un elemento <picture> para mostrar una imagen de un tipo MIME específico, si el navegador no admite ese tipo (es decir, el formato de imagen no funciona en el navegador), el elemento <source> se omitirá y se moverá más allá:

< picture > 
  < source  srcset = "home-logo.svg"  type = "image / svg + xml" > 
  < img  src = "home-logo.png"  alt = "Logo del Home" > 
</ picture >

Etiqueta html picture

Clasificaciones de contenido	Un elemento organizativo, un elemento normal, un elemento que contiene medios incrustados o un elemento interactivo.
Contenido permitido	Elemento `<source>` cero veces o más, seguido de elemento `<img>`.
Acrónimo	Las etiquetas de inicio o finalización no se pueden omitir.
Elementos del padre	Cualquier elemento que acepte elementos incrustados.
Interfaz DOMO	`HTMLPictureElement`

Características

En este elemento html picture se puede utilizar propiedades globales.

Soporte de navegadores

Chrome	Firefox	Edge	Safari	Ópera
38	38	13	9.1	25