Etiqueta HTML <imagen>


Ejemplo

Cómo utilizar la etiqueta <imagen>:

<picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

Definición y uso

La <picture>etiqueta brinda a los desarrolladores web más flexibilidad para especificar recursos de imágenes.

El uso más común del <picture>elemento será para la dirección de arte en diseños receptivos. En lugar de tener una imagen que se escala hacia arriba o hacia abajo en función del ancho de la ventana gráfica, se pueden diseñar varias imágenes para llenar mejor la ventana gráfica del navegador.

El <picture>elemento contiene dos etiquetas: una o más etiquetas <source> y una etiqueta <img> .

El navegador buscará el primer elemento <source> donde la consulta de medios coincida con el ancho de la ventana gráfica actual y luego mostrará la imagen adecuada (especificada en el atributo srcset). Se requiere el elemento <img> como el último elemento secundario del <picture>elemento, como una opción alternativa si ninguna de las etiquetas de origen coincide.

Sugerencia: el <picture>elemento funciona de manera "similar" a <video> y <audio>. Configura diferentes fuentes, y la primera fuente que se ajusta a las preferencias es la que se está utilizando.


Compatibilidad con navegador

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el elemento.

Element
<picture> 38.0 13.0 38.0 9.1 25.0

Atributos globales

La <picture>etiqueta también es compatible con los atributos globales en HTML .


Atributos de eventos

La <picture>etiqueta también es compatible con los atributos de eventos en HTML .


páginas relacionadas

Tutorial de HTML: Elemento HTML <imagen>

Tutorial CSS: CSS Responsive Design - Imágenes