TinyPNG: A better way to compress PNG images
Heads up! This post was written in 2014, so it may contain information that is no longer accurate. I keep posts like this around for historical purposes and to prevent link rot, so please keep this in mind as you're reading.
— Cory
By now, you know that optimizing images and other resources can reduce bandwidth and help your website load faster. Perhaps you've even used a tool like Pngcrush before to make your images smaller. Now, there's an even better solution.
TinyPNG uses "smart lossy compression techniques" to make your images smaller. But wait, isn't PNG a lossless format? Yes, and that's the beauty of TinyPNG:
By selectively decreasing the number of colors in the image, fewer bytes are required to store the data. The effect is nearly invisible but it makes a very large difference in file size!
To accomplish this, TinyPNG uses a quantization algorithm to reduce the number of colors in a way that's virtually undetectable to the naked eye. This is the same technique that Color Thief uses to generate color palettes from photos.
Here's how it works in more detail:
When you upload a PNG (Portable Network Graphics) file, similar colors in your image are combined. This technique is called “quantization”. Because the number of colors is reduced, 24-bit PNG files can be converted to much smaller 8-bit indexed color images. All unnecessary metadata is stripped too. The result: tiny PNG files with 100% support for transparency.
And here's a before/after comparison:
It's visually the same, but 74% smaller. Of course, this percentage will vary for each image. I've been using TinyPNG quite a bit lately and haven't found a single instance where the results were unacceptable.
While using their website is free, there are some paid options for TinyPNG. Instead of dropping your images onto their page, you can get the TinyPNG Photoshop plugin for $40. There's also a developer API with both free and paid plans. (If you want a Bash script that uses their API, here's one by @RanyAlbegWein.)
What other techniques do you use to make images smaller? Share them with me below!