El elemento HTML picture

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

El elemento <picture> nos da más flexibilidad al especificar recursos de imagen.

El elemento <picture> contiene varios elementos <source>, cada uno de los cuales se refiere a diferentes fuentes de imagen. De esta manera, el navegador puede elegir la imagen que mejor se adapte a la vista y / o dispositivo actual.

Cada elemento <source> tiene atributos que describen cuándo su imagen es la más adecuada.

Ejm

Mostrar diferentes imágenes en diferentes tamaños de pantalla:

<picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg">
</picture>

Nota: Siempre especifica un elemento <img> como el último elemento hijo del elemento <picture>. El elemento <img> es utilizado por los navegadores que no admiten el elemento <picture>, o si ninguna de las etiquetas <source> coincide.

Cuando usar el elemento <picture>

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

1. Ancho de banda

Si tienes una pantalla o dispositivo pequeño, no es necesario cargar un archivo de imagen grande. El navegador utilizará el primer elemento <source> con valores de atributo coincidentes e ignorará cualquiera de los siguientes elementos.

2. Soporte de formato

Es posible que algunos navegadores o dispositivos no admitan 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á cualquiera de los siguientes.

Ejm

<picture>
  <source srcset="img_avatar.png">
  <source srcset="img_girl.jpg">
  <img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>

Nota: El navegador usará el primer elemento <source> con valores de atributo coincidentes e ignorará los siguientes elementos <source>.