O documento discute o uso da biblioteca Thumbor para gerar versões reduzidas de imagens de forma rápida e escalável. Apresenta casos de uso da Globo.com que processa 50 milhões de imagens por dia com apenas 4 servidores e discute arquiteturas em camadas para lidar com volumes ainda maiores. Também aborda funcionalidades como reconhecimento facial, formatos responsivos e WebP.

1. imagens do jeito certo

2. Eu
• Bernardo Heynemann
• @heynemann - bernardo@corp.globo.com
• Gerente da Home da globo.com
• Dev
• Pai

3. Porquê o thumbor?
• ImageMagick, GraphicsMagick, PIL,
OpenCV, SORLThumbnails, …
• Biblioteca vs Image-as-a-service
• Reconhecimento Facial
• Comunidade Software Livre
• Eco-sistema extremamente adaptável

4. Comunidade
• 143 Forks
• 35 Contribuidores
Diretos
• Bibliotecas mantidas
pela comunidade
• Diversas issues
criadas e resolvidas
pela comunidade
• Segurança!!!

5. Reconhecimento Facial
As imagens da globo.com passaram a ter
menos pessoas sem cabeça!

6. $ pip install thumbor
$ thumbor
!
http://localhost:8888/
unsafe/300x200/<url>
Mas é difícil?

7. Alguns Números
• 50M Imagens / Dia
• ~3500 reqs/seg de
imagens por
servidor
• Apenas 4
servidores de
thumbor para toda
a globo.com

8. E como escalar?
Ou "Mas eu tenho 1.5 bilhão de imagens
servidas por mês!"

9. Arquitetura
em
camadas
* Servidores Thumbor
* Storage de Originais
* Storage de Formatos
* Reconhecimento Facial
* Front-End com Cache
* Varnish

10. Servidores com Thumbor
•Número de instâncias
igual ao número de CPUs
•Horizontalmente Escalável
•Supervisord

11. Storage de Originais
• Thumbor obtém
novos originais
através de
loaders
• Loader mais
comum é o
HTTPLoader

12. Storage de Formatos
• Processar novas imagens custa tempo
• Thumbor armazena o resultado do
processamento
• Caso seja necessário Reconhecimento
Facial, uma imagem temporária é gerada
• Diversos storages já existem e podem
facilmente ser criados (disco, Mongo,
Redis, AWS…)

13. Detecção de Objetos
Uso de pontos focais para melhores cortes

14. Gerando URLs
• Python
• Ruby
• NodeJS
• Java
• PHP
• Objective-C

15. Exemplos de Libs
https://github.com/thumbor/libthumbor
from libthumbor import CryptoURL
!
crypto = CryptoURL(key='my-security-key')
!
encrypted_url = crypto.generate(
width=300,
height=200,
smart=True,
image_url='/path/to/my/image.jpg'
)

16. Exemplo de Libs
require 'ruby-thumbor'
!
crypto = Thumbor::CryptoURL.new 'my-security-
key'
!
url = crypto.generate :width => 200, :height =>
300, :image => 'my.server.com/path/to/image.jpg'
!
# url will contain something like:
# /2913921in321n3k2nj32hjhj3h22/my.server.com/
path/to/image.jpg
https://github.com/thumbor/ruby-thumbor

17. Responsive Images
• Com thumbor é MOLE!
• srcset já disponível no Chrome Stable (34)
• É um draft na W3C, então mais browsers virão!
<img
src="u8rjDobxgyAX-uXFeeg-JvFdWr4=/400x0/foo.jpg"
srcset=“
/YbrTAi51EXok2o25X5Smn50BCl0=/480x0/foo.jpg 480w,
/20swCCedkSK4t7vwdDskoxxYhfA=/960x0/foo.jpg 480w 2x
">

18. WebP
• Novo formato de imagens impulsionado pelo
Google
• Consideravelmente menor que ambos PNG e JPG
• Suporte no thumbor é transparente para
usuários
• Browsers que suportam WebP recebem WebP e
os demais recebem a imagem no formato
original

19. estamos contratandoimagens do jeito certo
github.com/globocom
http://goo.gl/FYH5KX

20. Quer saber mais sobre as práticas
de engenharia da globo.com?
http://globodev.tumblr.com
Obrigado!

22. Links Úteis
• github.com/thumbor
• github.com/thumbor/thumbor/wiki
• github.com/99designs/phumbor
• github.com/ceejayoz/laravel-phumbor
• square.github.io/pollexor/