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