HTML Elemento <picture>
El elemento HTML <picture> le permite mostrar diferentes imágenes para diferentes dispositivos o tamaños de pantalla.
El elemento HTML <picture>
El elemento HTML <picture> ofrece a los desarrolladores web más flexibilidad a la hora de especificar recursos de imágenes.
El elemento <picture> contiene uno o más elementos <source>, cada uno de los cuales hace referencia a diferentes imágenes a través del srcset atributo. De esta manera el navegador puede elegir la imagen que mejor se ajuste 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.
Ejemplo
Mostrar diferentes imágenes para 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>
Try it Yourself »
Nota: Especifique siempre un elemento <img> como último elemento secundario del elemento <picture>. El elemento <img> lo utilizan los navegadores que no admiten el elemento <picture> o si ninguno de las etiquetas <source> coinciden.
Cuándo utilizar el elemento de imagen
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 atributos 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 utilizar el elemento <picture>, puede agregar imágenes de todos los formatos y el navegador utilizará el primer formato que reconozca e ignorará cualquiera de los siguientes elementos.
Ejemplo
El navegador utilizará el primer formato de imagen que reconozca:
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>
Try it Yourself »
Nota: El navegador utilizará el primer elemento <source> con valores de atributos coincidentes e ignorará cualquier siguiente <source> elementos.
HTML Etiquetas de imagen
| Tag | Descripción |
|---|---|
| <img> | Define una imagen |
| <map> | Define un mapa de imágenes |
| <area> | Define un área en la que se puede hacer clic dentro de un mapa de imagen |
| <picture> | Define un contenedor para múltiples recursos de imágenes |
Para obtener una lista completa de todas las etiquetas HTML disponibles, visite nuestra Referencia de etiquetas HTML en nuestro sitio web W3SchoolsES. ElMejor.
