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>.