Elemento HTML <imagen>
El elemento HTML <picture>
le permite mostrar diferentes imágenes para diferentes dispositivos o tamaños de pantalla.
El elemento HTML <imagen>
El elemento HTML <picture>
brinda a los desarrolladores web más flexibilidad para especificar recursos de imagen.
El <picture>
elemento contiene uno o más <source>
elementos, 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 adapte a la vista y/o dispositivo actual.
Cada <source>
elemento tiene un
media
atributo 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>
Nota: Siempre especifique un <img>
elemento como el último elemento secundario del <picture>
elemento. El <img>
elemento es utilizado por navegadores que no admiten el <picture>
elemento, o si ninguna de las <source>
etiquetas coincide.
Cuándo usar el elemento de imagen
Hay dos propósitos principales para el <picture>
elemento:
1. Ancho de banda
Si tiene una pantalla o dispositivo pequeño, no es necesario cargar un archivo de imagen grande. El navegador utilizará el primer <source>
elemento 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
<picture>
elemento, puede agregar imágenes de todos los formatos, y el navegador usará 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>
Nota: el navegador utilizará el primer <source>
elemento con valores de atributos coincidentes e ignorará los siguientes <source>
elementos.
Etiquetas de imagen HTML
Tag | Description |
---|---|
<img> | Defines an image |
<map> | Defines an image map |
<area> | Defines a clickable area inside an image map |
<picture> | Defines a container for multiple image resources |
Para obtener una lista completa de todas las etiquetas HTML disponibles, visite nuestra Referencia de etiquetas HTML .