La realidad es que el saber crear diseños para sitios para móviles es una cosa, pero el crear sitios «Responsive» para móviles es otra, ya que además de verse bien, nuestro proyecto debe tener un buen rendimiento. Por desgracia en la mayoría del mundo las conexiones móviles aún envidian mucho tanto en velocidad como en latencia a las conexiones de escritorio. Es por eso que no debemos tratar a todos los dispositivos de la misma manera, especialmente si consideramos que una imagen grande para escritorio puede pesar el doble o triple que una imagen chica para móviles… y las tarifas telefónicas cobran en Kilobytes.
¿La solución al problema? Enviar diferentes recursos, según el dispositivo. La buena noticia es que ya se puede implementar hoy… la mala, es que su implementación de momento no es nativa, y requiere importar una librería en javascript que “emula” una solución que estará en futuras versiones de Firefox, Safari, Chrome, Opera y si tenemos suerte hasta Internet Explorer (parece que aún lo tienen como “consideración”).
La sintaxis es relativamente simple:
<picture>
<source srcset=”imagen-para-celulares.jpg 480w, imagen-para-tablets.jpg 728w, imagen-para-desktop.jpg 1280w”>
<img src="recursos/imagen-por-defecto-que-sirve-para-SEO-y-navegadores-no-compatibles-o-sin-javascript.jpg" />
</picture>
Básicamente es el <img> de toda la vida envuelto en una etiqueta <picture> donde también aparece la etiqueta <source> y el atributo “srcset” donde agregamos nuestra lista de elementos en una lista para enviar la imagen según el ancho de la pantalla al más mero estilo de los @mediaquery. Cabe mencionar que éste ejemplo no es el único, y existen diferentes combinaciones que involucran enviar imágenes según resolución (como las pantallas retina) o medidas del ancho de la página con medidas relativas (como rem).
Los responsables de la nueva etiqueta son el Responsive Images Community Group quienes han trabajando junto a front-ends y desarrolladores de navegadores para su implementación, y según parece sus esfuerzos han dado frutos, ya que próximamente si todo sale bien, veremos a <picture> como una parte más de HTML5.
Enlaces: Picturefill, Responsive Images.