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

875

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
875
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/

×