Genera imágenes bajo demanda adaptadas a distintos dispositivos con Thumbor

Uno de los elementos más importantes cuando adaptamos una web a distintos dispositivos como móviles, tablets o teles (por poner ejemplos) son las imágenes. Para que realmente esa adaptación sea eficiente debemos convertir el tamaño, resolución, peso y demás de características de las imágenes, según la plataforma en la que se visualice.

Existen distintas formas de abordar ese problema: una de ellas es contar con un servidor que genere imagenes bajo demanda, como bien podemos hacer con Thumbor.

Thumbor es una aplicación open source que permite desde la parte del servidor redimensionar, recortar o componer imágenes (añadir marcas de agua). Con esta herramienta podemos conseguir bajo demanda el tamaño deseado de las imágenes que queramos mostrar. Nos podemos basar en el tipo de dispositivo, resolución o incluso el ancho de banda disponible (3G o WiFi).

Es necesario configurar el servidor para que acepte nuestras peticiones REST con los parámetros deseados para transforme. Un ejemplo de URL con el logo de Google:

/unsafe/100x100/http://www.google.com/images/srpr/logo3w.png

Hay distintos parámetros configurables para aportar seguridad a esas peticiones, firmando cada una de ellas. Para trabajar con este tipo de formato de urls en apps Android podemos usar una librería desarrollada por Square que nos permite generar las urls de las peticiones de una manera mucho más intuitiva, Pollexor.

String u = image("http://www.google.com/images/srpr/logo3w.png")
  .resize(100, 100)
  .toUrl();

String u = image("http://example.com/background.png")
  .resize(200, 100)
  .filter(
      roundCorner(10),
      watermark("http://example.com/overlay1.png")
  )
  .toUrl()

¿Qué beneficios aporta generar imágenes adaptadas por dispositivo?

• Reducción del consumo de datos móviles. Las imágenes adaptadas permiten cargarlas y visualizarlas más rápidamente. Podemos ahorrar ancho de banda según estemos en una red móvil o por WIFI.

• Reducción del consumo de memoria. Visualizar imágenes en las aplicaciones móviles requieren dedicar parte de la memoria del dispositivo, cuanto más grandes sean más recursos utilizaremos. Podemos ajustar esa variable según el tipo de móvil y sus capacidades.

• Reducción del uso de disco en la caché. No es lo mismo tener que cachear imágenes grande a más pequeñas

Vía | Square blog Más información | Thumbor, Pollexor