La etiqueta HTML `picture`

Descubra los conceptos básicos para trabajar con imágenes y la etiqueta HTML `picture`, y cómo hacer que sean responsivas.

HTML nos da la pictureetiqueta, que hace un trabajo muy similar al del mysrcxsetatributo de una imgetiqueta, y las diferencias son muy sutiles.

Se utiliza picturecuando, en lugar de simplemente ofrecer una versión más pequeña de un archivo, se desea modificarlo por completo o ofrecer un formato de imagen diferente.

El mejor caso de uso que he encontrado es cuando se sirve una imagen WebP, que es un formato que todavía no es muy compatible. En la pictureetiqueta se especifica una lista de imágenes y se utilizarán en orden, por lo que en el siguiente ejemplo, los navegadores que admiten WebP utilizarán la primera imagen y, en caso contrario, volverán a JPG:

picture source type="image/webp" img src="image.jpg" alt="An image"/picture

La sourceetiqueta define uno (o más) formatos para las imágenes. La imgetiqueta es una alternativa en caso de que el navegador sea muy antiguo y no admita la pictureetiqueta.Te recomendamos Dioses del mundo - Dioses griegos, romanos, aztecas...

En la sourceetiqueta interior picturepuedes agregar un mediaatributo para establecer consultas de medios.

El ejemplo que sigue funciona de manera similar al ejemplo anterior con mysrcxset:

picture source media="(min-width: 500w)" source media="(min-width: 800w)" source media="(min-width: 1000w)"sizes="800px" source media="(min-width: 1400w)"sizes="800px" img src="dog.png" alt="A dog image"/picture

Pero ese no es su caso de uso, porque como puedes ver, es mucho más detallado.

La pictureetiqueta es reciente, pero ahora es compatible con todos los navegadores principales excepto Opera Mini e IE (todas las versiones).

Tips de HTML

Tal vez te puede interesar:

1. La etiqueta HTML `iframe`
2. Cómo cargar una imagen en un lienzo HTML
3. Cómo utilizar insertAdjacentHTML
4. Cómo cambiar la URL de una imagen HTML en modo oscuro

La etiqueta HTML `picture`

Descubra los conceptos básicos para trabajar con imágenes y la etiqueta HTML `picture`, y cómo hacer que sean responsivas.

programar

es

2025-01-21

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente