Image Optimization for the web

When creating images for online use your adventure probably begins in Photoshop. Choosing File -> Save for Web… allows precise optimization of your images to achieve just the right balance between quality and file size. But you shouldn’t stop there! There are tons of image optimization programs and websites out there and these can usually help you to compress your image files even more, resulting in faster page load times.

Since there are so many solutions out there, I couldn’t possibly review them all. Furthermore every image is different so your results many vary. What you will find here is just my recommendation for the best PNG, GIF, and JPG optimizers, based on my results after trying some of the more popular solutions.

PNG

TinyPNG was the winner for me! Images were reduced in file size anywhere from 9% – 91%. That’s a big margin, but it was also 29 images that I tested. The amount of reduction didn’t seem to have anything to do with the initial file sizes.

GIF

I tested only four images with RIOT. In the end I was able to reduce file sizes anywhere from 62% – 96%. Again, the original file sizes didn’t seem to have anything to do with how much RIOT was able to compress them.

JPG

I thought I had found my optimal optimizer in the form of Imagemin (the official Grunt image optimzation task) but I quickly noticed that it was somehow very unpredictable.  While some JPGs were optimized beautifully, others became horribly pixelated. What’s more, this behavior seemed completely random: every time I ran the script I got different results for different images. In the end I decided to forego optimizing past Photoshop’s Save for Web… dialog box since I find badly optimized JPGs very ugly to look at. If anyone knows of a good JPG optimizer please leave a comment and tell me about it!

Leave a Reply

Your email address will not be published. Required fields are marked *