HTML picture

La etiqueta <picture> en HTML se utiliza para especificar diferentes imágenes para diferentes dispositivos y resoluciones. La etiqueta <picture> permite mostrar diferentes imágenes según el ancho de la pantalla, tamaño de pantalla y resolución de la imagen.

Esto es útil para mejorar la velocidad de carga de una página y proporcionar una experiencia de usuario óptima en diferentes dispositivos.

Ejemplo de uso

Aquí tienes un ejemplo de cómo se utiliza:

<picture>
  <source media="(min-width: 650px)" srcset="large.jpg">
  <source media="(min-width: 465px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Description">
</picture>
Lenguaje del código: HTML, XML (xml)

En este ejemplo se está utilizando una imagen con tres tamaños diferentes, “large.jpg”, “medium.jpg” y “small.jpg” con diferentes tamaños de pantalla.

Atributos

Los atributos más importantes de la etiqueta <picture> en HTML son:

• srcset: especifica un conjunto de imágenes con diferentes tamaños y formatos. Es el atributo principal de la etiqueta <picture>, ya que permite especificar las diferentes versiones de las imágenes para diferentes dispositivos y resoluciones.

• sizes: especifica el tamaño de la imagen según el tamaño de la pantalla. Este atributo permite especificar el tamaño de la imagen que se mostrará en función del tamaño de la pantalla.

• media: especifica las condiciones de visualización para las imágenes. Con este atributo se pueden especificar las condiciones de visualización para las diferentes versiones de las imágenes, como el tamaño de pantalla, la orientación, etc.

Además, también se puede utilizar el atributo alt dentro de la etiqueta <img> dentro de la etiqueta <picture>, este atributo especifica una descripción alternativa para la imagen, que se mostrará en caso de que la imagen no pueda ser mostrada.

Más ejemplos

Sí, aquí tienes algunos ejemplos de cómo utilizar los atributos de la etiqueta <picture> en HTML:

1. Insertar una imagen con diferentes tamaños para diferentes dispositivos:

<picture>
  <source media="(min-width: 1000px)" srcset="large.jpg">
  <source media="(min-width: 600px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Description" sizes="(max-width: 600px) 100vw, 600px">
</picture>
Lenguaje del código: HTML, XML (xml)

En este ejemplo se está usando una imagen con tres tamaños diferentes, “large.jpg”, “medium.jpg” y “small.jpg” con diferentes tamaños de pantalla.

2. Insertar una imagen con diferentes tamaños y formatos:

<picture>
  <source media="(min-width: 600px)" srcset="large.webp" type="image/webp">
  <source media="(min-width: 600px)" srcset="large.jpg" type="image/jpeg">
  <img src="small.jpg" alt="Description" sizes="(max-width: 600px) 100vw, 600px">
</picture>
Lenguaje del código: HTML, XML (xml)

En este ejemplo se está usando una imagen con tres tamaños diferentes, “large.webp”, “large.jpg” y “small.jpg” con diferentes tamaños de pantalla y formatos.

3. Insertar una imagen con diferentes tamaños y condiciones de visualización

<picture>
  <source media="(min-width: 600px) and (orientation: portrait)" rcset="large.jpg">
  <img src="small" alt="Description" sizes="(max-width: 600px) 100vw, 600px">
</picture>
Lenguaje del código: HTML, XML (xml)

En este ejemplo se está utilizando una imagen con dos tamaños diferentes “large.jpg” y “small.jpg” y se establecen condiciones de visualización para cada una de ellas, en este caso se establece que la versión “large.jpg” solo se mostrará en pantallas con un ancho de al menos 600px en modo retrato.