21. El elemento picture

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>
Scroll al inicio