Your SlideShare is downloading. ×
  • Like
Thumbor: Imagens do Jeito Certo
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Thumbor: Imagens do Jeito Certo

  • 623 views
Published

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

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

Published in Engineering
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
623
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
3
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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!
  • 21. Links Úteis • github.com/thumbor • github.com/thumbor/thumbor/wiki • github.com/99designs/phumbor • github.com/ceejayoz/laravel-phumbor • square.github.io/pollexor/