Como utilizar el tag picture de HTML5 para hacer que una imagen sea responsive

Como puedes ver, el diseño responsive está más que asentado pero aún existen ciertos problemas que debes tratar para que las imágenes de tu página web sean responsive. Esperad que ya os estoy oyendo, no hablo de que las imágenes cambien automáticamente su tamaño en función del viewport , lo cual es técnicamente sencillo, si no a que las imágenes se vean correctamente cuando son muy pero que muy pequeñas. Es decir, que no pierdan el foco de lo que se quiere mostrar.

El consenso ideal entre los desarrolladores web es que la dimensión real también debe ser responsive. El navegador debe poder cargar imágenes más pequeñas o más grandes en función del tamaño del viewport. De esta forma podemos mostrar la imagen en la mejor proporción posible en lugar de mostrarla de manera reducida.

Aquí es donde entra en juego el tag picture de HTML5. Este tag nos permite contar con múltiples fuentes de imagen y controlar como mostrarlas a través de media queries. Veamos cómo se hace, ¿de acuerdo?

Tengo una imagen en tres dimensiones diferentes, como puedes ver más abajo. La imagen se ha recortado para mantener el foco en la persona de la imagen. El plan aquí es que mostraremos el tamaño más pequeño en pantallas pequeñas y la imagen más grande en pantallas grandes.

Picturefill puede funcionar de dos maneras: podemos embeber el srcset en la etiqueta img o usar el tag picture. Aquí optaremos por el tag picture, ya que es más manejable, más fácil de entender y más legible.

Similar a los tag de video y audio, picture puede ofrecer múltiples source que apunten a la fuente de imagen, de la siguiente manera.

<picture>
  <source srcset="img/persona-xsmall.jpg" media="(max-width: 480px)">
  <source srcset="img/persona-small.jpg" media="(max-width: 640px)">
  <source srcset="img/persona-med.jpg">
  <img srcset="img/persona-med.jpg" alt="">
</picture>

El elemento source, como puedes ver en el código de arriba, está configurado con un atributo media. En este atributo, definimos el punto de interrupción del viewport donde se debe mostrar la imagen. Puedes ver el efecto de inmediato.

Soporte con el navegador

Actualmente, todos los navegadores ahora admiten el elemento picture de HTML5, incluido Microsoft Edge e incluso navegadores móviles. Pero si quieres que sea soportado por navegadores antiguos como Internet Explorer donde este elemento no es compatible, puede usar un polyfill como Picturefill.

Picturefill es una librería de JavaScript desarrollada por Filament Group. Nos permite usar el tag picture donde quieras. Para comenzar, descarga el script del repositorio de Github y coloca picturefill.js o picturefill.min.js en el header de tu documento.

<script src="js/picturefill.js"></script>

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP