Introducción a thumbor

Introducción a thumbor

Hoy me gustaría hablaros de un software que a mis ojos brilla mucho. Como está tan bien parido y creo que dará que hablar durante mucho tiempo, le voy a dedicar un repaso amplio. Una introducción que vereis a continuación, y dos futuras entradas más: una explicando una instalación básica y otra con un ejemplo de despliegue en producción en alta disponibilidad.

Thumbor

Thumbor es un servidor de imágenes escrito en python. Resumiendo mucho, podríamos decir que se encarga de recoger imágenes, procesarlas y entregarlas. Entendiendo el procesado como una redimensión, un recortado, aplicar un filtro, etc.

La gracia principal es que no tienes que especificar que procesado quieres tener para una imagen a priori, simplemente incluyes el tipo de procesado y los parámetros en una URL generada para cargar la imagen. Así, cuando thumbor recibe la petición, procesa la imagen desde el original al vuelo y la entrega. Puedes probar el uso de thumbor en http://thumborize.me/

A modo de ejemplo ilustrativo, tomemos como ejemplo esta redimensión, a partir de esta imagen original:

http://thumbor.eduherraiz.com/unsafe/550x200/http://www.eduherraiz.com/media/portfolio/uploads/2015/04/13/dsc01223.jpg

Nota: Para los siguientes ejemplos de la entrada obviaré la parte del servidor de thumbor y la url de carga de imagen. Todas las imágenes de la entrada han sido generadas con thumbor.

Caché de imagenes

Mi avispado lector ya se habrá dado cuenta que no es viable generar todas las imágenes al vuelo, para remediar esto, thumbor permite conservar una copia de las ya generadas a modo de caché. Si ya ha recibido una petición igual anteriormente ya no tiene que repetir el proceso.

Procesados típicos

Encontraremos los procesados típicos: redimensión y recorte, rotado o volteado. También encontraremos otros como luminosidad, contraste, desenfocado y aunque está bien documentado, también podemos ver desde su repositorio la cantidad de filtros disponibles es muy extensa. Aquí unos pocos ejemplos:

Original    Original

     /-180x-180/

     /filters:brightness(40)/

     /filters:blur(7)/

     /filters:contrast(120)/

    /fit-in/filters:fill(288CFF)/

Marca de agua

Es muy interesante ver como con thumbor cosas que antes suponían esfuerzo en el desarrollo simplemente se han quedado en componer una URL, ejemplo de como añadir marca de agua con opacidad a una imagen.

/unsafe/550x200/filters:watermark(http://$URL/apsl.png,-10,-10,30)/

Procesado inteligente

Pero aparte, y aquí thumbor brilla mucho también, podemos utilizar procesados inteligentesdetectores focales, faciales, que nos permitirá encontrar las partes importantes de la imagen como caras u objetos, ¡y thumbor adaptará los recortes a estas detecciones! Para esto utiliza detectores OpenCV y nos abre un universo nuevo en el tratamiento de las imágenes. Este procesado se realiza añadiendo el parámetro "smart".

Tomemos como ejemplo para ilustrar el procesado inteligente esta imagen:

¿Que pasaría si le pedimos a thumbor que nos haga un redimensionado de menos alto de la imagen original? Pues que cogería por defecto el centro de la imagen y nos devolvería algo así:

/unsafe/400x150/

Está claro que no es una buena imagen, pero si aplicamos sobre el mismo tamaño el procesado inteligente, es capaz de detectar las caras y darnos una imagen mucho mejor:

/unsafe/400x150/smart/

Siempre podemos ver que ha encontrado el servidor con el procesado inteligente gracias al modo debug, donde en este caso veremos marcadas las caras, pero puede que si no encuentra caras reconozca puntos de interés o puntos focales.

/unsafe/debug/500x100/smart/

El procesado inteligente abre la puerta a no tener que pensar mucho en como utilizar los recortes, simplemente especificas el tamaño que necesitas y el se encargará de darte la mejor imagen posible.

Información del procesado

Podemos utilizar el parámetro "meta" en la url para obtener un json con toda la meta-información de la redimensión generada:

/unsafe/meta/550x200/

Dando como resultado un informativo json, que seguro alguien le encontrará utilidad a nivel de aplicación.

También podemos utilizar el parámetro "debug" para ver otra información visual del procesado si esta tuviese alguna. Por ejemplo en la detección de caras

Seguridad

Tenemos la posibilidad de utilizarlo en dos modos: de forma segura o insegura.

Modo seguro

Se configura el servidor con una clave secreta que un generador de urls de nuestra aplicación debe conocer. Gracias a esta clave añade un hash a cada URL que el servidor validará antes de procesar. Recordar que la URL thumbor será pública y la iniciará el navegador del cliente, por tanto solo necesitamos securizar que nadie externo pueda utilizar thumbor para redimensionar sus imágenes. El código que tendremos que incluir en nuestra app para generar los links a thumbor se simplifica con libthumbor esta librería python del propio proyecto que genera las URLS, también con soporte para django nativo.

La url generada tendría esta forma:

http://thumbor.eduherraiz.com/LYlJ76NKiy2HAQ9RZR8iqIOTHGE=/300x150/smart/http://www.eduherraiz.com/media/portfolio/uploads/2015/04/13/dsc01223.jpg

Modo inseguro 

Las urls generadas con este modo, en vez del hash incluyen primero el parámetro "unsafe", donde cualquier petición que le llegue a thumbor la procesará. Este comportamiento está activado por defecto y hay que desactivarlo ante cualquier despliegue en un servidor abierto al público. Si no fuese así, cualquiera podría utilizar nuestro servidor para redimensionar imágenes. El thumbor de pruebas que tengo en mi servidor y del cual podeis ver los links en esta entrada permite el modo inseguro para que pódais probar redimensiones. Sentiros libres de probarlo. 

Control de Errores

El servicio permite configurar el ya indispensable sentry para controlar las excepciones que puedan existir en la creación de imágenes. Incluso nos permite la posibilidad de crear nuestro propio manejador de excepciones. Así no se nos pasarán posibles errores en la generación de las URLS.

Encolado de procesos

El procesamiento de filtros en modo inteligente puede consumir muchos recursos, habitualmente carga de CPU, para resolver este problema thumbor vuelve a tenerlo todo preparado, nos proporciona una cola de tareas donde se procesa la imagen en segundo plano y controlando el número de redimensiones en paralelo que puede hacer. Es muy interesante saber que cuando tenemos el encolado activado, podemos configurar mientras no esté la imagen con el procesado inteligente completado nos ofrezca la versión normal, mucho más rápida de procesar, para salir del paso.

Conclusión

Un aplicación bien pensada en todos los sentidos y que resuelve muchos problemas a la vez de forma muy simple y práctica. Creemos que para nosotros será pieza clave en el futuro y apostamos fuerte por ella. Nos acerca un poquito más a tener aplicaciones "12Factor".

En próximas (y espero en breve) entregas les mostraré algunas magias de thumbor a nivel de configuración y optimización. Terminando por ver un ejemplo que demuestra que se puede montar thumbor en alta disponibilidad, sin mucho esfuerzo, de forma segura y completamente escalable. Estad atentos.

Los pingbacks están cerrados.

Comentarios