Image Rendering with Amazon CloudFront

by Patrice Neff

At Squirro we work a lot with images. For every story that we collect we try to extract a meaningful picture. That image is shown in the application and in the digest emails we send out. Of course we need the image in various sizes to account for the different needs on desktop, tablet, mobile, email clients, etc.

As there are so many changing requirements we didn’t want to pre-render all the different image sizes. Instead we create the thumbnails in real time and then cache them.

For example the image below is an on-the-fly rendition of the original image on Flickr.

Thumbler example

We are big fans of REST services here at Squirro. So we created a service called Thumbler that creates the thumbnails. It’s nothing fancy, just a relatively simple wrapper for ImageMagick. It first downloads the original image, usually from Amazon S3 where we store it when we get the story. Then it applies the configuration present in the URL to resize the image.

The deployment is where it gets really interesting. We put Thumbler behind Amazon CloudFront, which is Amazon’s Content Delivery Network. They distribute their caching servers all over the globe. That way a user who is in South America will probably connect to their server in São Paulo whereas a user sitting in Palo Alto will only have to travel within the city to the closest server.

When the request arrives at the CloudFront server, it looks up its local cache. If another user in the area has recently requested the thumbnail, that cached response is delivered. Otherwise CloudFront will now contact out Thumbler service and get a freshly rendered thumbnail.

Thumbler itself has an additional caching layer using Varnish. So if two users request it from different regions, we won’t have to render the thumbnail twice.

The full architecture for our thumbnailing is shown in the following graph.

image

There’s a Tool for That - TinyPNG.org

Performance is critical to the success of any web site. At Squirro we use css spriting, domain sharding, javascript minification, http compression and many other rather complex methods to ensure that our service is as fast as possible.

But one thing is as easy as pie: keep your images file sizes small. 

Enter TinyPNG.org. A service that trims a lot of fat from your PNG images without a noticeable difference in quality.

Let’s see an example:

The Squirro logo, as saved by Photoshop CS6, 20.6 kilobytes

Now the same image, optimised with TinyPNG.org, 9.7 kilobytes

Thats a 53% reduction, and I can’t see a difference. Can you?

There are other tools out there. OptiPNG and pngcrush both reduce the above Photoshop image by about 13%. While these clearly can’t keep up with size reduction, both are open-source and command line tools. You can easily include them in scripts and applications. For example you can automatically optimise all of the png files that your users upload. With TinyPNG this is not feasible, as you have to go to their site and optimise them manually.

Its also important to understand that TinyPNG reduces the numbers of colours in your image. So there may be cases where an optimised image looks worse. But I yet have to see such an example.

So, go ahead and speed up your site. Run all of your sites PNG’s through TinyPNG.org. It’s easy & free, but don’t forget to donate and keep panda George happy.

What tools are you using to reduce your file sizes? Do you know of a tool that can beat TinyPNG? 

Source: tinypng.org