Antes de empezar un poco de spam sobre mí. Me llamo Edu Herraiz, en eduherraiz.com podeis ver mis cosas, trabajo en apsl como administrador de sistemas y me gusta python, linux y el software libre. Y la pesca!

Podeis encontrar pública esta presentación en esta URL.

Está realizada con un software llamado landslide en el que escribes código markdown y genera HTML.

Pódeis ver el código de la presentación en github.

Y como nota reseñable, las imágenes presentadas se visualizan en la presentación directamente desde un thumbor.

Bien, empezemos.

¿Qué es thumbor? Es un servidor de imágenes total, porque incluye todo lo que podemos necesitar para gestionar nuestro media.

¿porqué inteligente? Porque es capaz de encontrar puntos importantes en una imagen y ofrecer recortes adaptados a esos puntos importantes.

Otra ventaja es que procesa bajo demanda, es decir, no tenemos que definir a priori que tamaños o filtros de imagen queremos.

Está escrito en python, que ya es un punto a su favor, pero además, es pythónico y cualquiera de sus partes está preparada para que la adaptemos a nuestras necesidades.

Es libre, con la licencia MIT.

El proyecto lo empezó el periodico brasileño globo, para mejorar su proceso de tratamiento de imágenes en 2011.

¿Qué funcionalidad cubre?

Es capaz de recoger la imagen, desde una URL remota o de un fichero de disco o también se la podemos pasar nosotros desde nuestra aplicación.

Procesa la imagen, reconociendo incluso que es lo importante, recortando en consecuencia, aplicando filtros y optimizando la imagen para reducir su peso.

Y también se encarga de entregarlas al cliente final, guardando las imágenes procesadas en cache para no tener que volver a repetir el proceso en la siguiente petición.

¿Cómo funciona?

El secreto está en la URL.

Donde necesites una imagen específica, montas los parámetros de una URL thumbor definiendo como la quieres.

Por ejemplo, en la primera sección va el parámetro sobre la seguridad. En el segundo sobre el tamaño de la imagen.

Qué filtros aplicar a la imagen y finalmente el parámetro de la imagen original a cargar.

Ahora veremos más en detalle las opciones cada parte de la URL.

Voy a obviar la parte de seguridad y carga en los ejemplos donde no sea relevante, para que quede más claro.

Thumbor dispone de dos modos de seguridad. Inseguro, done generará cualquier redimensión que le pidamos.

O el modo seguro. Como es el cliente final el que hace la petición a thumbor, lo único que tenemos que proteger es que la imagen que le estamos pidiendo generar sea lícita, para que alguien no aproveche nuestro thumbor para servir sus imágenes.

Para ello en lugar de la palabra clave unsafe se incluye un hash generado en el momento de crear la URL, a partir de una clave conocida por el servidor y el generador de URLS.

Tenemos varias librerías para generar URLS protegidas desde cualquier lenguaje. Aquí os dejo algunos ejemplos.

También incluye la posibilidad de limitar desde que hosts se puede redimensionar, con el típico ALLOWED_SOURCES.

Para el parámetro de tamaño os enseñaré las posibilidades a partir de esta imagen original y con ejemplos.

El parámetro de tamaño se compone de dos variables numéricas, que hacen referencia al ancho y alto, separadas por la letra equis. Aquí veis como redimensiona la imagen forzando el ancho y el alto, pero al ser asímetrica, la recorta.

Podemos obviar una de ellas para mantener la proporción de la imagen.

Es posible ampliar la imagen, aunque el original sea de tamaño inferior.

También podemos utilizar números negativos, para voltear un eje.

O los dos ejes.

Igual que en el caso del tamaño vamos a ver una muestra de filtros con ejemplos a partir de esta imagen original.

Se añade la palabra clave "filters:" seguido del filtro a aplicar, en ese caso de luminosidad.

Podemos rotar la imagen especificando el número de grados

Thumbor incorpora filtros más avanzados, como este, posibilitando añadir una marca de agua.

También se pueden encadenar filtros con el símbolo 2 puntos. Los irá aplicando secuencialmente.

El último parámetro de la URL es el que indica la imagen original a cargar.

Thumbor tiene dos cargadores empaquetados:

1 De una url remota, donde es capaz de bajar la imagen.

2 Mediante un fichero, el parámetro de la URL en este caso será la ruta al fichero.

Puedes hacer tu propio cargador siguiendo una estructura sencilla en python, por ejemplo un cargador desde el servicio de Amazon S3.

Dentro de un momento veremos como almacena thumbor las imágenes, pero aquí cabe comentar que thumbor proporciona también una API para poder cargar imágenes en él. Se envía el fichero vía POST y lo almacena. Nosotros utilizamos esta API para integrar thumbor con una aplicación Django. Y que suba la imagen directamente a thumbor.

El almacenamiento (o storage) es donde se guardan los archivos que ya han sido cargados, para no tener que cargarlos cada vez. ¿Puede conincidir el almacenacimiento con el cargador? sí, pero esta separación nos ofrece independencia y versatilidad.

Tenemos la posibilidad de utilizar almacenacimiento a disco, en bases de datos mongo, redis o memcache. O utlizando uno propio otra vez, para el caso de s3.

Thumbor guarda las imágenes procesadas para no tener que procesarlas de nuevo. Lo llaman result_storage

El proyecto solo propone guardar esta caché en disco, pero puede ser interesante para algunas arquitecturas de alta disponibilidad guardar las imágenes procesadas en s3 con el controlador de cache propio igual que en los otros casos.

Resumiendo, tenemos estos tres conceptos de almacenacimiento de thumbor.

Tenemos varias opciones en cada unos de ellos. Y dependiendo del caso, escogeremos uno de cada uno.

Tenemos un caso donde cargamos las imágenes vía API en un storage_s3 y la cache de resultados la tenemos en disco.

Aunque hoy os vamos a enseñar otro caso de uso que nos presentará despues Álvaro, cargando las imágenes por http y guardamos el resto a disco.

El procesado inteligente o "smart" extrae información relevante de la imagen.

Utiliza código python (opencv) para seleccionar puntos importantes de la imagen.

En base a esos puntos puede recortar de manera más provechosa.

Se utiliza añadiendo el parámetro /smart/ en la URL

Thumbor cachea las detecciones para no tener que procesar cada vez.

Tomemos como original esta imagen de la premiere de juego de tronos en nueva york.

Utilicemos thumbor para pedirle un recorte más pequeño para por ejemplo, incluir en un nuesto blog.

El único que ha quedado contento es Tyrion, que ya se relame pensando en el trono de Hierro, pues no ha quedado titere con cabeza.

Si utilizamos el modo inteligente, es capaz de detectar las caras en la foto y ofrecer esta versión.

Podemos ver que ha detectado en la imagen con el parámetro en la URL de debug.

Teniendo el original ya cargado, lo que tarda más tiempo en todo el proceso thumbor es la detección inteligente.

Para resolver este problema, thumbor permite una delegación de la detección a un proceso a parte que lo hace en background, llamado remotecv.

Remotecv se comunica con thumbor vía un redis.

Cuando se pide un recorte inteligente, se encola la detección y mientras se sirve la imagen en modo normal.

Thumbor incorpora la posibilidad de pasar la imagen generada por un proceso de optimización.

Este proceso lo que hace es reducir el peso de la imagen sin perder calidad.

Tenemos optimizadores para los formatos típicos. Y añadir nuestros propios optimizadores.

Thumbor y remotecv están empaquetado en PyPI y son sencillos de instalar vía pip install.

Lo que no es tan sencillo de explicar es la parte de OpenCV, sus dependencias y sobretodo las 82 variables con sus combinaciones que incluye el archivo de configuración de thumbor. Y quizá tampoco os apetezca perder tiempo en aprenderlo.

Para resolver esto, he perdido un poco de pelo y ganado un par de canas en crear una imagen docker completa que incluye todo lo explicado.

No voy a entrar en como instalar docker o docker-compose, está muy bien documentado para cualquier SO en la documentación oficial, os dejo los links.

Solo teneis que crear un archivo yml con la definición de la arquitectura docker (teneis 4 ejemplos en nuestro github con los casos típicos)

Y ejecutais un comando "docker-compose up". Ya podreis probar en local todo el servicio y sus posibilidades.

Thumbor escala muy bien, os propongo este esquema como ejemplo.

Podríamos tener los servicios de almacenacimiento y base de datos redis en servicios cloud que nos ya nos ofrezcan alta disponibilidad.

Con ene instancias que contengan los procesos thumbor y remotecv que realmente procesan, con un número de instancias elástico según carga.

Un balanceador al gusto e incluso con una CDN por encima para acelerar la distribución geográfica y la entrega.

Me dejo algunas cosas en el tintero, es imposible explicarlo todo en este reducido tiempo, pero espero haber cubierto lo importante.

Os dejo aquí algunos links para profundizar. Gracias por atender y espero poder resolver vuestras dudas.