I’m a big fan of thumbor and resizing images on the fly
behind a CDN; what a great way to keep the front end flexible while seeing the
same* performance as storing pre-sized images. When I’m working with a
fast-moving startup we don’t want image processing API integrations; we want to
add a few settings in the img tag
src url and see results. Strangely I only found a
couple services that do this, with imgix being the most prominent. I
may be searching the wrong thing, so I’d love see more options in the comments.
But meanwhile I didn’t want to saddle my client with an extra $50 per month just
to see a bump in image performance, and their IP/image ownership was a concern.
There’s a great post by Yipit on using a Thumbor-based solution at
scale, and apparently I completely missed out on a more in-depth tutorial
when I set about borrowing Yipit’s image strategy (you might head there if you want to
install on an Amazon Linux AMI, though I haven’t tried Reed’s steps myself).
I had an Ubuntu image ready to go so I thought
I’d write a short post on getting a quick-and-dirty** image processor up and
running with a few
apt-get commands. Go ahead and launch an Ubuntu EC2 image with
ports 22 and 80 exposed,
ssh into it and follow along:
Now we just have a few config files to write. Again this is going to be simplified—you’ll probably want to do a deeper dive into the settings, but this will get you started.
Supervisor Config File
Nginx Config File
A few more commands will wrap up this shindig:
Voilà, image processing server ready to go. Try the thumbor example image by navigating here in your browser:
There are a few more things you’ll want to do before you use this in a production environment (probably more than a few). To name some:
- Assign your instance an Elastic IP
- Put the instance behind a CDN like CloudFront
- Read about and implement Thumbor Security Measures
- Configure your image storage depending on your needs/resources
- Other Thumbor config, app monitoring, and all the other fun stuff that comes along with your new “custom” image processing solution
That being said, it is pretty exciting to introduce even a simple version of this stack in your product. If you are iterating on thumbnail sizes while your early adopters are uploading large images even the simple implementation above will give you huge performance gains, and you can focus on optimizing security/storage/etc as your business matures.