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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Thumbor: Imagens do Jeito Certo

818

Published on

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
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
818
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
7
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/

×