Thumbor: Imagens do Jeito Certo
22
imagens do jeito certo
-
Upload
bernardo-heynemann -
Category
Engineering
-
view
832 -
download
1
description
Aprenda a usar o thumbor para ter as suas imagens do jeito certo em qualquer tamanho.
Transcript of Thumbor: Imagens do Jeito Certo
imagens do jeito certo
Porquê o thumbor?
• ImageMagick, GraphicsMagick, PIL, OpenCV, SORLThumbnails, …
• Biblioteca vs Image-as-a-service
• Reconhecimento Facial
• Comunidade Software Livre
• Eco-sistema extremamente adaptável
Comunidade• 143 Forks
• 35 Contribuidores Diretos
• Bibliotecas mantidas pela comunidade
• Diversas issues criadas e resolvidas pela comunidade
• Segurança!!!
Reconhecimento FacialAs 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 globo.com
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-End com Cache * Varnish
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 necessário Reconhecimento Facial, uma imagem temporária é gerada
• Diversos storages já existem e podem facilmente ser criados (disco, Mongo, Redis, AWS…)
Detecção de ObjetosUso de pontos focais para melhores cortes
Gerando URLs
• Python
• Ruby
• NodeJS
• Java
• PHP
• Objective-C
Exemplos de Libshttps://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' )
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
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 ">
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
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/laravel-phumbor
• square.github.io/pollexor/
