HTML <picture> Element

El elemento HTML <picture> le permite mostrar diferentes imágenes para diferentes dispositivos o tamaños de pantalla.👇

Elemento <picture>

El elemento HTML <picture> provee a los desarrolladores web más flexibilidad en la especificación de recursos de imagen.

El elemento <picture> contiene uno o más elementos <source>, cada uno hace referencia a diferentes imágenes a través del atributo srcset. De esta manera, el navegador puede elegir la imagen que mejor se adapte a la pantalla y/o dispositivo actual.

Cada elemento <source> tiene un atributo media que define que imagen es la más adecuada.

Ejemplo:

<!-- Imágenes según el tamaño de pantalla del usuario -->
<picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg" style="width:auto;">
</picture>

Nota: siempre especifique un elemento <img> como último elemento hijo del elemento <picture>. El elemento <img> se utiliza para navegadores que no soportan el elemento <picture>, o si alguna de las etiquetas <source> no coincide.

¿Cuándo usar el elemento <picture>?

Hay dos propósitos principales para el elemento <picture>:

1. Ancho de banda

   Si tienes un dispositivo o una pantalla pequeña, no es necesario cargar una imagen grande. El navegador utilizará el primer elemento <source> que coincida con los atributos e ignorará los demás elementos.

2. Soporte de formato

   Es posible que algunos navegadores o dispositivos no soporten todos los formatos de imagen. Al usar el elemento <picture>, puedes agregar imágenes de todos los formatos, y el navegador usará el primer formato que reconozca e ignorará los demás.

   Ejemplo:

Nota: El navegador usará el primer elemento <source> que coincida con los valores de los atributos e ignorará los demás elementos <source>.

Resumen

• El elemento <img> define un imagen

• El elemento <map> define un mapá de imagen

• El elemento <area> define el área dentro de la imagen donde se puede hacer clic

• El elemento <picture> define un contenedor para múltiples recursos de imágenes

Traducido con 💚 desde W3Schools.com