Thumbor: Imagens do Jeito Certo

1,672 views
1,417 views

Published on

Aprenda a usar o thumbor para ter as suas imagens do jeito certo em qualquer tamanho.

Published in: Engineering

Thumbor: Imagens do Jeito Certo

  1. 1. imagens do jeito certo
  2. 2. Eu • Bernardo Heynemann • @heynemann - bernardo@corp.globo.com • Gerente da Home da globo.com • Dev • Pai
  3. 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. 4. Comunidade • 143 Forks • 35 Contribuidores Diretos • Bibliotecas mantidas pela comunidade • Diversas issues criadas e resolvidas pela comunidade • Segurança!!!
  5. 5. Reconhecimento Facial As imagens da globo.com passaram a ter menos pessoas sem cabeça!
  6. 6. $ pip install thumbor $ thumbor ! http://localhost:8888/ unsafe/300x200/<url> Mas é difícil?
  7. 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. 8. E como escalar? Ou "Mas eu tenho 1.5 bilhão de imagens servidas por mês!"
  9. 9. Arquitetura em camadas * Servidores Thumbor * Storage de Originais * Storage de Formatos * Reconhecimento Facial * Front-End com Cache * Varnish
  10. 10. Servidores com Thumbor •Número de instâncias igual ao número de CPUs •Horizontalmente Escalável •Supervisord
  11. 11. Storage de Originais • Thumbor obtém novos originais através de loaders • Loader mais comum é o HTTPLoader
  12. 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. 13. Detecção de Objetos Uso de pontos focais para melhores cortes
  14. 14. Gerando URLs • Python • Ruby • NodeJS • Java • PHP • Objective-C
  15. 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. 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. 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. 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. 19. estamos contratandoimagens do jeito certo github.com/globocom http://goo.gl/FYH5KX
  20. 20. Quer saber mais sobre as práticas de engenharia da globo.com? http://globodev.tumblr.com Obrigado!
  21. 21. Links Úteis • github.com/thumbor • github.com/thumbor/thumbor/wiki • github.com/99designs/phumbor • github.com/ceejayoz/laravel-phumbor • square.github.io/pollexor/

×