htmlcinco

HTML 5, encontrá novedades, tutoriales y traducciones sobre este lenguaje.

La etiqueta picture de HTML

La etiqueta picture de HTML

A la hora de escribir el HTML en un proyecto, la etiqueta picture nos puede ser de mucha utilidad para implementar imágenes responsive de forma fácil.

Podemos utilizar la etiqueta picture cuando, en lugar de servir solo una versión más pequeña de un archivo, queremos utilizar una totalmente diferente, o incluso servir un formato de imagen diferente.

Por ejemplo, si queremos usar una imagen WebP (formato que aún no es ampliamente soportado), con la etiqueta picture, especificamos una lista de imágenes que se utilizarán en orden, por lo que en el siguiente ejemplo, los navegadores que admitan WebP usarán la primera imagen, y de lo contrario recurrirán al JPG.

1
2
3
4
<picture>
  <source type="image/webp" srcset="imagen.webp">
  <img src="imagen.jpg" alt="Mi imagen">
</picture>

En este primer ejemplo, la etiqueta source define uno o más formatos para la imagen. Mientras que la clásica etiqueta img es la alternativa en caso de que el navegador no soporte la etiqueta picture.

El atributo media para imágenes responsive

Pero ahora veremos lo que, para mí, es lo más interesante del elemento picture: en la etiqueta source podemos establecer media queries (sí, como en CSS) en el atributo media.

En el ejemplo a continuación, utilizamos distintas imágenes dependiendo de media queries:

1
2
3
4
5
6
7
8
9
10
<picture>
  <source srcset="chica.jpg, chica2x.jpg 2x"
  media="(max-width: 639px)">
  <source srcset="media.jpg, media2x.jpg 2x"
  media="(min-width: 640px) and (max-width: 1023px)">
  <source srcset="grande.jpg, grande2x.jpg 2x"
  media="(min-width: 1024px)">
  <img src="mi-imagen.jpg" alt="Mi images"
  srcset="mi-imagen2x.jpg 2x">
</picture>

Otro uso interesante del ejemplo anterior, el atributo srcset de la etiqueta source puede incluir multiples urls (separadas por comas) y a su vez cada url puede tener adjudicado un pixel ratio. Esto es ideal para soportar distintas resoluciones (por ejemplo, el famoso retina de mac).

El elemento picture es bueno no solo para ahorrar ancho de banda y hacer que tus páginas se carguen más rápido, sino que también puede ser una buena ayuda si las imágenes se tienen que ver diferentes en distintos dispositivos. Por ejemplo, mostrar imagenes más simples o de diferente proporción para pantallas de móviles.

Soporte en navegadores

El soporte en navegadores es muy bueno, y si bien no es soportado en Internet Explorer, existe este polyfill que funciona perfectamente bien. Se los recomiendo 100%

Comparte conocimiento:
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin
Share on Facebook
Facebook
0
  • Bitcoin
  • Ethereum
  • Bitcoin cash
  • Tether
  • Stellar
Scan to Donate Bitcoin to 1L9sRKFJaXHQ8skQXR9b76KATmtEa9hsPn

Bitcoin!

Si el artículo te resultó útil, no dudes en colaborar con nosotros con Bitcoin. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Bitcoin

Scan to Donate Ethereum to 0xff68A1f93A2910A9DB02f7ab0DeD97F0ad62b541

Ethereum!

Si el artículo te resultó útil, no dudes en colaborar con nosotros con Ethereum. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Ethereum

Scan to Donate Bitcoin cash to qqysclxkfj4wnrqepksydauq74lzud805v9zlptxa8

Bitcoin cash!

Si el artículo te resultó útil, no dudes en colaborar con nosotros con Bitcoin cash. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Bitcoin cash

Scan to Donate Tether to 0xff68A1f93A2910A9DB02f7ab0DeD97F0ad62b541

Tether!

Si el artículo te resultó útil, no dudes en colaborar con nosotros con Tether. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Tether

Scan to Donate Stellar to GDIP3K46BRH3CDVGKDYWNEVHFI5LGG5MOBWU7QUCOCNOW4DJYIEMY2QC

Stellar!

Si el artículo te resultó útil, no dudes en colaborar con nosotros con Stellar. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Stellar

¿Quieres saber más?
¡Suscríbete a nuestro newsletter!

Respetamos tu privacidad y tu tiempo, no recibirás ningún tipo de correo basura.

2 comentarios para “La etiqueta picture de HTML”

  1. Jose dice:

    Muy bueno el post, siempre hay cosa por aprender y hoy aprendí otra. Espero más. Muchas gracias

  2. admin dice:

    Jose, me has alegrado el día! Me alegro que hayas aprendido nuevo!
    Saludos!

Dejar un comentario

¿Quieres saber más?

 

¡La mejor información en tu correo!

(proximamente importantes novedades)