What is it?

  • Image manipulation server
  • Image caching server
  • Image SSL proxy
  • Open source!

What does it do?

  • Asset loading http, file, mongo, redis etc
  • Strips exif data
  • Strips icc data
  • Converts to webp
  • Crops
  • FitIn
  • Resizes, No Upscale
  • Grayscale, brightness, contrast
  • Facial detection, feature detection
  • Smart cropping

contactzilla.com

  • SSL Proxy
  • Caching - 6 gig of profile pictures
  • Resizing
  • Cropping

Using It

  • Simple URL manipulation e.g.
    http://thumbor/unsafe/150x400/smart/http://server/image.jpg
     
  • PHP - using composer:

    "99designs/phumbor": "dev-master"
$server = 'http://127.0.0.1:8888';
$secret = '';
$url = 'http://remote-server.com/image.jpg';

$thumbor = Thumbor\Url\BuilderFactory::construct($server, $secret);

// Just output the original image
$src = $thumbor
    ->url($url)
    ->addFilter('strip_icc')
    ->resize(120,120);

echo "<img src=\"$src\"";

Resampling

460 x 307

96kb

39kb

->addFilter('strip_icc')
->addFilter('format(webp)');

32kb

30kb

->addFilter('strip_icc');

Face Detection

Meta URL

http://thumbor/unsafe/meta/smart/{URL}

Requires OpenCV

/debug

Smart Crop

$thumbor
    ->url($url)
    ->smartCrop(true)
    ->resize(150,400);
$thumbor
    ->url($url)
    ->resize(150,400);

Security

  •  HMAC with SHA1​ signing

 

http://thumbor/unsafe/300x200/smart/path/to/image.jpg

 

Becomes:

 

http://thumbor/12345678923456789012345678/300x200/smart/path/to/image.jpg

 

Requires secure key specified in config.

Running it

  • Python Tornado - single port/process
  • Scale out by running multiple instances
  • Reverse proxy to it using nginx (or Varnish!)
upstream backend  {
  server 127.0.0.1:8000;
  server 127.0.0.1:8001;
  server 127.0.0.1:8002;
  server 127.0.0.1:8003;
}

server {
  listen      443;
  server_name thumbor.mysite.com;

  # SSL certificates to use on secure connections
  ssl on;
  ssl_certificate	/etc/nginx/ssl/certificate.crt;
  ssl_certificate_key   /etc/nginx/ssl/server.key;

  # Forward requests to thumbor.
  location / {
    proxy_pass         http://backend;
    include            /etc/nginx/proxy.conf;
  }
}

Other stuff

  • File loaders
  • Backends
  • Rest API

Be more dog!

Use Thumbor!

Any questions?

Thumbor

By Tom Holder