El Pasado, Presente y Futuro de las Imágenes Responsivas

Es peligroso ir solo, toma esto contigoSpeaker: Matt Marquis.
Título Original: The Past, Present and Future of Responsive Images.
Evento: An Event Apart, Austin 2014.
Tema: Desarrollo Web.

En esta plática Matt Marquis expone la problemática de los sitios web responsivos que se vuelven demasiado pesados por el uso de imágenes. También hace una reseña sobre cómo se idearon y en qué han consistido las soluciones para este problema. Finalmente presenta una solución final y nos exhorta a adoptar el uso de Picturefill, así como alternativas como SVGs e Imágenes Compresivas.

NOTA: A pesar de que Matt Marquis se esmeró mucho en concientizarnos sobre la problemática de los sitios responsivos pesados; no explica cómo utilizar el polyfill ni en qué consisten las alternativas de imágenes responsivas.

Si quieren profundizar un poco más sobre SVGs y <Picture> y Srcset y Sizes, los invito a que chequen: SVG Es Para Todos y Picturefill e Imágenes Responsivas.


Hacía todavía unos pocos años, los profesionistas del web estábamos acostumbrados a diseñar en base a un sólo contexto: el tamaño de una pantalla de escritorio. Con la aparición del iPhone y la subsecuente explosión de dispositivos móviles, recordamos que la naturaleza del web era la de ser ubicua. Términos como “fold” y cualquiera que se refiriera a una medida fija se volvieron irrelevantes y nuestros esfuerzos se dirigieron hacia el diseño responsivo.

A pesar de ello, parece que hemos caído en el mismo error y una vez más se diseña asumiendo un determinado contexto. Ya no se trata de medidas fijas en una pantalla, sino más bien del ancho de banda y costo del plan de datos. Los diseñadores y desarrolladores están haciendo sitios en base a un contexto que conocen y el con el cual se sienten cómodos: Pensar que todo mundo cuenta con un ancho de banda y plan de datos ilimitado.

Esto es lo que le dicen a la gente cada que desarrollan un sitio pesadísimo.
Esto es lo que le dicen a la gente cada que desarrollan un sitio pesadísimo.

Esto ha resultado en sitios web responsivos sumamente pesados y lentos. Un sitio web actual en promedio pesa 2 MB, y el motivo principal es el uso de imágenes. Pareciera no haber una salida con la creciente cantidad de pantallas de mayor resolución que requieren de imágenes más pesadas.

Pero sí la hay. La solución para cuidar que el peso de nuestros sitios consiste en dedicarle un poco más a la planeación sobre cómo utilizar nuestros recursos. Con una correcta planeación y el uso de las nuevas técnicas de imágenes responsivas, es posible crear diseños responsivos y responsables.

El problema es que muchos deciden no dar un esfuerzo extra y dejan que los usuarios sufran las consecuencias, atentando contra el desarrollo saludable del web.

El problema de los sitios pesados

Las imágenes son el principal culpable por el cual un sitio responsivo se vuelve demasiado pesado. El problema es que los recursos que se utilizan para el tamaño de desktop, como imágenes grandes, también son descargados en la versión móvil donde tal vez no se muestran o se ven pequeñas. Por este motivo, quienes navegan utilizando un dispositivo móvil sufren al lidiar con sitios pesados, lentos y ni siquiera ven un beneficio.

Gráfico del peso de recursos en un sitio web
Las imágenes son el motivo principal por el cual los sitios web pesan tanto.

Cuando Ethan Marcotte acuñó el término diseño responsivo pensó en un web accesible sin importar el dispositivo que utilice. Sin embargo todo parece apuntar a lo contrario, porque cada vez que pasamos por alto el performance de un sitio y resulta pesado, estamos excluyendo a miles, o tal vez millones de personas que no pueden acceder a él porque consume su plan de datos o porque la velocidad de su conexión nunca termina de cargarlo.

El web trata sobre acceso universal. Como profesionales del web somos responsables de asegurarnos de que el contenido esté disponible para la gente y no de bloqueárselo por culpa de nuestras limitantes técnicas.

En búsqueda de soluciones

Según el resultado de algunos estudios:

  • 72% de los sitios responsivos envían los mismos recursos que son descargados tanto por dispositivos móviles como de escritorio. (1)
  • 71% de la gente espera que los sitios web se carguen más rápido desde su dispositivo móvil. Los sitios tienen sólo 2 segundos de la atención de la gente antes de que se distraigan por algo en su entorno. Las personas que usan su teléfono tienen menos tolerancia al tiempo de descarga de un sitio. (2)
  • Agregar 160kb de imágenes a un sitio incrementó la tasa de rebote por lo menos un 12% en dispositivos móviles. (3)
Gráfica de tasa de rebote en un sitio pesado
Cuanto más pesa el sitio, mayor la tasa de rebote

Como podemos ver, ahora más que nunca debemos prestar mayor atención al performance. Cada vez son más las personas que navegan desde un dispositivo móvil y sin embargo, pasamos este dato por alto. Los sitios móviles o dispositivos con pantallas de baja resolución descargan los mismos recursos que el sitio desktop, volviéndose pesados y ni siquiera ven un beneficio.

Es por eso que la Comunidad de Imágenes Responsivas, que es un grupo de desarrolladores preocupados por resolver este problema y mantener el desarrollo saludable del web, comenzaron a experimentar y proponer nuevas especificaciones para el HTML.

A lo largo de estos últimos años se han presentado muchas propuestas, algunas de ellas ya fueron descartadas. Actualmente quedan 2 que todavía continúan vigentes y han estado madurando:

El Elemento <picture>

El nuevo elemento <picture> fue propuesto como un nuevo patrón en el markup que permitiera especificar múltiples fuentes de imágenes (por ejemplo imágenes pequeñas para móvil, resolución normal y HD) y un contenido de fallback, en caso de que el navegador no reconozca la tecnología.

Para proponer <picture> se basaron en el patrón ya existente de <video>. Con el uso de media queries, los desarrolladores pueden tener el control sobre cuándo y qué imágenes son presentadas al usuario.

<picture>
  <source media="(min-width: 40em)"
    srcset="big.jpg 1x, big-hd.jpg 2x">
  <source 
    srcset="small.jpg 1x, small-hd.jpg 2x">
  <img src="fallback.jpg" alt="">
</picture>

Atributos Srcset y Sizes:

Otra propuesta fue la de agregarle los atributos srcet y sizes a . Srcset permite proveer una lista de imágenes disponibles y sus tamaños. De esta manera, los navegadores pueden utilizar esta información para elegir la mejor opción de imagen.

<img src="small.jpg"
     srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
     sizes="(min-width: 36em) 33.3vw, 100vw"
     alt="A rad wolf">

Srcset es eficiente para lidiar con resoluciones y trabaja sin media queries. Srcset también fue adoptado por .

Picturefill: Apoyando la Solución Final

Después años de trabajo, los esfuerzos de la Comunidad de Imágenes Responsivas se vieron recompensados: Los navegadores finalmente decidieron darle soporte a <picture>.

PicturefillPicturefill es un polyfill creado para que seamos capaces de utilizar las técnicas de imágenes responsivas que requieren el uso de o srcet y sizes en navegadores que todavía no soportan las tecnologías.

Con Picturefill estamos apoyando a dirigir el web hacia una dirección saludable. Mientras más personas utilicen y Srcet y Sizes, estarán apoyando a que estos nuevos atributos sigan madurando y que sean más los navegadores que les den soporte; hasta el punto en el que ya no necesitemos utilizar más el polyfill.

Para más información sobre cómo utilizar el polyfill, y Srcset y Sizes pueden ver: Picturefill e Imágenes Responsivas.

Alternativas

Algunas de las alternativas que tenemos para el manejo de imágenes son las siguientes:

SVGs

Los SVG son gráficos vectoriales que pueden escalarse a cualquier tamaño y mantienen su calidad. Son muy versátiles, pesan poco y gozan de un gran soporte de los navegadores. Los SVG son una buena opción si vamos a utilizar un sistema de íconos o ilustraciones en vectores. Para más información pueden ver SVG Es Para Todos.

Imágenes Compresivas

Las imágenes compresivas consisten en guardar una imagen al doble del tamaño pero con un 0% de calidad. Una vez guardada, se coloca en el sitio pero ocupando la mitad del tamaño. De esta manera el archivo termina pesando menos y la calidad de imagen se ve aceptable tanto en pantallas normales como en retina.

IMPORTANTE: Esta alternativa está perdiendo popularidad muy rápidamente. El motivo es que, a pesar de que el archivo generado pesa menos, la memoria que el navegador utiliza para descargarla sigue siendo la misma y no hay realmente un beneficio. Además, si alguien quiere descargar el recurso original, terminará obteniendo una imagen de poca calidad.

Conclusión

Creo que la mejor opción de todas es la de planear responsablemente el desarrollo del sitio. Tenemos muchas opciones disponibles y es importante estar consciente sobre qué consiste cada una de ellas y las consecuencias de usarlas. Por ejemplo, genera una syntaxis que puede volverse difícil de mantener, Srcset y Sizes no es la mejor opción para dirección de arte y los SVG no sirven para imágenes de mapa de bits. Lo importante es encontrar un balance y utilizar técnicas mixtas.

Tampoco debemos olvidar que es nuestra responsabilidad tomar en cuenta a los usuarios reales, sus limitantes y utilizar responsablemente nuestros recursos. Una buena planeación es parte fundamental de un buen diseño.


Referencias

  1. Guy’s Pod
  2. What Users Want From Mobile
  3. Web performance is user experience

Notas:

Video: