Si tus imágenes no son Responsive, tu web no es Responsive

Ethan Marcotte acuñó el término Responsive Web Design hace ya casi cuatro años en un artículo publicado en A List Apart que giraba entorno a la correcta implementación en los CSS de los `media queries´con el objetivo de conseguir un diseño en rejilla fluido, en el que dependiendo del tamaño de la pantalla los elementos se redistribuyen o incluso desaparecen para mayor comodidad del usuario:

Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking.

El problema es que no basta con que una web se vea bien en un móvil, por poner un ejemplo `Twenty Fourteen´ el último tema con el que se publicó la última versión de WordPress, se ve de maravilla en un dispositivo móvil:

Pero si nos tomamos la molestia de inspeccionar lo que realmente está pasando por detrás, nos podemos llevar una sorpresa:

Como se puede ver en la imagen, en un dispositivo de 320x480pixels las imágenes reducen sus dimensiones (`flexible images´ como decía Ethan Marcotte), pero el problema es que la imagen sigue siendo la misma 672×372 pixels y lo que es peor sigue pesando lo mismo que antes. Cuando hablamos de una imagen individual no pasa nada, pero mirar todas las imágenes que se cargan desde un dispositivo móvil por el mero hecho de aterrizar en un blog con este tema:

Utilizando PingDom podemos saber cuanto pesa en total la página: 3.7 Mb:

Dejarme que lo ponga en contexto para los que somos un poco antiguos como yo… hace no mucho, habrías necesitado tres floppys de 1,4Mb para poderle pasar a un amigo sólo la Home de tu blog:

Yo creo recordar que cuando me compré la Abadia del Crimen para PC, sólo ocupaba un disco de los grandes de 540 kb:

Bueno… estoy perdiendo el norte con este artículo –pero hay que ver las maravillas que hacían antes y con tan poco– está claro que hoy una foto de mi iPhone 5 ya ocupa 3.5Mb… no es para tanto que la Home de un blog ocupe eso. Pero aunque ahora todo se mida por Gigas o Teras, no es razonable que una página pese lo mismo cuando se ve en una pantalla de 1680×1050 pixels que cuando se ve un teléfono 320×480… no tiene sentido agotar el plan de datos móvil de tu usuario o hacerle esperar 20 ó 30 segundos a que cargue tu web, cuando está en tu mano conseguir que todo suceda en un par de segundos.

En mi child theme estilo Boing Boing, he estado haciendo algunas adaptaciones en la imagen de cabecera de los posts para predicar con el ejemplo:

Además de servir las imágenes a través del CDN de CloudFront, la imagen va disminuyendo de tamaño y peso: 1600×550, 1024×550, 604×340, 302×170. Con WordPress es sencillo hacer todas estas cosas, si bien tiene su truco y yo todavía no lo tengo del todo dominado.

Para empezar en el momento en que referencias una imagen en el HTML de tu web esa imagen aunque luego la ocultes a través de CSS se va a cargar. Si queremos evitarlo las tenemos que referenciar en los propios CSS y ponerlas como backgroud de otros elementos… el problema es que los CSS se supone que son algo estático, mientras que las imágenes que utilizamos en la cabecera van cambiando: cada entrada tiene su imagen destacada y no podemos referenciarlas todas en los CSS, por lo que nos vemos obligados a intercalar estilos de la capa presentación donde no debería haberlos.

Por otra parte incrustar las imágenes como background provoca que los plugins más populares en WordPress del tipo `lazy-load´ ignoren este tipo imágenes. En esta parte es donde me he atrancado especialmente.

En definitiva, que seguiremos trasteando hasta alcanzar un punto de equilibrio razonable.