Como utilizar la etiqueta picture en HTML5

Ejemplo de como utilizar la nueva etiqueta de HTML5 picture para un proyecto responsive

Desde que comenzamos con el responsive la optimización del contenido supuso un reto para los desarrolladores. Como el cambio de espacio era evidentemente diferente, las preferencias de visualización cambiaban de un dispositivo a otro siendo el móvil la parte más complicada de adaptar. Los tiempos de carga en estos dispositivos es un tema de peso (nunca mejor dicho).Cada byte cuenta.

Con esta premisa surgió la idea de la etiqueta <picture> que facilitaba la carga de imágenes dependiendo de la resolución del dispositivo, aliviando así muchas pesadillas de programadores back y carga de imágenes innecesariamente grandes.

La idea es ofrecer al navegador la opción de escoger la imagen que se muestra dependiendo de la resolución que tengamos:

<picture>
  <source src=”high-res.jpg” media=”(min-width: 1000px)”>
  <source src=”med-res.jpg” media=”(min-width: 800px)”>
  <source src=”low-res.jpg”>
  <img src=”fallback.jpg” alt=”This picture loads on non-supporting browsers.”>
</picture>

Como podéis observar la idea es simple y con la última de las opciones dejamos la posibilidad de cargar la imagen para navegadores que no soporten esta propiedad nueva.

A fecha de hoy esta propiedad se puede utilizar en la versión 37 de Google Chrome Canary. Aquí dejo una captura donde se puede ver funcionando en este navegador