El elemento HTML <picture> permite mostrar diferentes imágenes para diferentes dispositivos o tamaños de pantalla. El elemento HTML <picture> brinda a los desarrolladores web más flexibilidad para especificar recursos de imágenes.
El elemento <picture> contiene uno o más elementos <source>, cada uno de los cuales se refiere 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 vista y/o dispositivo actual.
Cada elemento <source> tiene un atributo media que define cuándo la imagen es la más adecuada.
Ejm
Muestra diferentes imágenes para diferentes pantallas
<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 secundario del elemento <picture>. El elemento <img> lo utilizan los navegadores que no admiten el elemento <picture>, o si ninguna de las etiquetas <source> coincide.
Cuando se usa el elemento <picture>
Hay dos propósitos principales para el elemento <picture>:
- 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.
- 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 elementos.
Ejm
<picture> <source srcset="img_avatar.png"> <source srcset="img_girl.jpg"> <img src="img_beatles.gif" alt="Beatles" style="width:auto;"> </picture>