00:00:00

Notes

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Sobre mí

Notes

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.

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

¿Qué es thumbor?

  • Servidor de imágenes total e inteligente
  • Procesa bajo demanda
  • Opcionalmente encuentra puntos importantes de la imagen para redimensionar (opencv)
  • Escrito en python y pythónico
  • Libre (Licencia MIT)
  • globo.com

Notes

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.

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Problemática

Notes

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Con Thumbor

Notes

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

¿Qué funcionalidad cubre?

  • Recoge
    • De un URL remota (http_loader)
    • De un storage (filesystem, mongodb, redis, memcached, AWS)
    • De una aplicación (vía API)
  • Procesa
    • Recorta
    • Aplica filtros
    • Optimiza
    • Detecta puntos importantes para recortar mejor
  • Entrega
    • Cachea resultados

Notes

¿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.

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

La magia está en la URL

Notes

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Generación de la URL

  • http://thumbor-server/unsafe/550x200/filters:filtro(0)/dominio.com/imagen.jpg
  • Servidor thumbor
  • Seguridad
  • Tamaño
  • Filtros y parámetros
  • Cargador

Notes

¿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 · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Seguridad

  • Modo inseguro

    • /unsafe/
    • Cualquiera puede generar URL -> Se podrían aprovechar
  • Modo seguro

  • Se puede restringir vía ALLOWED_SOURCES

Notes

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.

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Libthumbor

from libthumbor import CryptoURL
crypto = CryptoURL(key='my-security-key')

encrypted_url = crypto.generate(
    width=300,
    height=200,
    image_url='www.midominio.com/image.jpg'
)

print encrypted_url

URL generada: /LYlJ76NKiy2HAQ9RZR8iqIOTHGE=/300x200/www.midominio.com/image.jpg

Notes

Aquí podeis ver un ejemplo de libthumbor, la librería de python.

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Ejemplos

Notes

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Tamaño (original)

Notes

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

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Tamaño

  • /300x300/

Notes

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.

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Tamaño

  • /300x/

Notes

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

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Tamaño

  • /x700/

Notes

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

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Tamaño

  • /x-400/

Notes

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

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Tamaño

  • /-x-400/

Notes

O los dos ejes.

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Filtros y parámetros (original)

Notes

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

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Luminosidad

  • /filters:brightness(40)/

Notes

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

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Rotar

  • /filters:rotate(90)/

Notes

Podemos rotar la imagen especificando el número de grados

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Contraste

  • /filters:contrast(120)/

Notes

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Desenfocar

  • /filters:blur(7)/

Notes

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Marca de agua

  • /filters:watermark(http://$URL/pycones_logo.png,-10,-10,30)/

Notes

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

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Esquinas redondeadas

  • /filters:round_corner(20,255,255,255)/

Notes

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Múltiples filtros

  • /filters:blur(7):round_corner(20,255,255,255)/

Notes

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

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Arquitectura

Notes

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Storages

Notes

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.

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.

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Tiempo de carga una petición

Notes

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Thumbor vs Nginx

Notes

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Custom, custom, custom

Notes

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Resumen

Notes

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

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Resumen

Notes

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

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Resumen

Notes

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.

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Procesado inteligente

  • Extrae información de la imagen para mejorar los procesados
  • Utiliza OpenCV
  • Detectores focales, faciales, ...
  • "/smart/" en la URL
  • Detector storage

Notes

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.

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Procesado inteligente

Notes

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.

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Normal

  • /700x250/

Notes

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.

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Smart

  • /700x250/smart/

Notes

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

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Debug (/debug/smart/)

Notes

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

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Meneame app

Notes

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Meneame app (smart)

Notes

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Tiempos normal vs smart

Notes

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Detección encolada (remotecv)

Notes

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

  • Detección inteligente lleva mucho tiempo
  • Proceso en background separado
  • RemoteCV
  • Se comunica vía redis con thumbor
  • Se sirve sin smart si no está la detección
Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Optimizadores

  • Reducir el peso de la imagen
  • Mejoras entre un 5% y un 15%
  • JPEG
  • PNG
  • GIF

Notes

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 · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Instalación

  • Está empaquetado en PyPI
  • Opencv
  • Dependencias de sistema
  • Varios procesos y servicios
  • 82 Variables de configuración

Notes

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.

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Notes

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.

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Notes

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 · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Demo time

Notes

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Demo imagen recortado inteligente

Notes

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Demo imagen original

Notes

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Demo imagen debug

Notes

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Notes

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

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Notes

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz

Escalabilidad

Notes

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.

Thumbor · Noviembre 2015 · PyConEs · apsl.net · @eduherraiz