imagens do jeito certo
Eu
• Bernardo Heynemann
• @heynemann - bernardo@corp.globo.com
• Gerente da Home da globo.com
• Dev
• Pai
Porquê o thumbor?
• ImageMagick, GraphicsMagick, PIL,
OpenCV, SORLThumbnails, …
• Biblioteca vs Image-as-a-service
• Recon...
Comunidade
• 143 Forks
• 35 Contribuidores
Diretos
• Bibliotecas mantidas
pela comunidade
• Diversas issues
criadas e reso...
Reconhecimento Facial
As imagens da globo.com passaram a ter
menos pessoas sem cabeça!
$ pip install thumbor
$ thumbor
!
http://localhost:8888/
unsafe/300x200/<url>
Mas é difícil?
Alguns Números
• 50M Imagens / Dia
• ~3500 reqs/seg de
imagens por
servidor
• Apenas 4
servidores de
thumbor para toda
a g...
E como escalar?
Ou "Mas eu tenho 1.5 bilhão de imagens
servidas por mês!"
Arquitetura
em
camadas
* Servidores Thumbor
* Storage de Originais
* Storage de Formatos
* Reconhecimento Facial
* Front-E...
Servidores com Thumbor
•Número de instâncias
igual ao número de CPUs
•Horizontalmente Escalável
•Supervisord
Storage de Originais
• Thumbor obtém
novos originais
através de
loaders
• Loader mais
comum é o
HTTPLoader
Storage de Formatos
• Processar novas imagens custa tempo
• Thumbor armazena o resultado do
processamento
• Caso seja nece...
Detecção de Objetos
Uso de pontos focais para melhores cortes
Gerando URLs
• Python
• Ruby
• NodeJS
• Java
• PHP
• Objective-C
Exemplos de Libs
https://github.com/thumbor/libthumbor
from libthumbor import CryptoURL
!
crypto = CryptoURL(key='my-secur...
Exemplo de Libs
require 'ruby-thumbor'
!
crypto = Thumbor::CryptoURL.new 'my-security-
key'
!
url = crypto.generate :width...
Responsive Images
• Com thumbor é MOLE!
• srcset já disponível no Chrome Stable (34)
• É um draft na W3C, então mais brows...
WebP
• Novo formato de imagens impulsionado pelo
Google
• Consideravelmente menor que ambos PNG e JPG
• Suporte no thumbor...
estamos contratandoimagens do jeito certo
github.com/globocom
http://goo.gl/FYH5KX
Quer saber mais sobre as práticas
de engenharia da globo.com?
http://globodev.tumblr.com
Obrigado!
Links Úteis
• github.com/thumbor
• github.com/thumbor/thumbor/wiki
• github.com/99designs/phumbor
• github.com/ceejayoz/la...
Thumbor: Imagens do Jeito Certo
Próximos SlideShares
Carregando em…5
×

Thumbor: Imagens do Jeito Certo

1.896 visualizações

Publicada em

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

Publicada em: Engenharia
  • Seja o primeiro a comentar

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/

×