TinyPNG FTW
Posted on Friday, November 30th, 2012
TinyPNG.org is an online PNG compression service described as…
Advanced lossy compression for PNG images that preserves full alpha transparency.
I have been using ImageOptim for a while now and decided to test them against each other.
TinyPNG has an example on their site that uses a picture of a panda. I took the large version (56.9 KB) and ran it through both TinyPNG and ImageOptim. Just like the online example, TinyPNG reduced it by 72% to a minuscule 16.2 KB, while ImageOptim only reduced it by 8.8% to 53 KB. I thought, “Okay, maybe there is some bias trickery going on here and TinyPNG used an image that was set up just perfect to get the most out of its service”, so I tried it with a few more images.
First I went to IconFinder.com and grabbed this PNG file. The original file size was 16.6 KB. After running it through both services, I found that TinyPNG reduced the image by 67% to 5.5 KB while ImageOptim reduced the image by only 20.1% to 13.2 KB. Still quite a difference.
The second image I decided to test was a simple gradient I made in Photoshop from 100% black to 100% transparent 1000 x 1000 pixels at 72 dpi. After exporting the image for web the file size came in at 6.3 KB. After running the image through both services, yet agin, I got some interesting results. TinyPNG actually increased the file size by 18% to 7.4 KB while ImageOptim managed to reduce it by 33.8% to 4.2 KB. This made me pause for a moment, so I decided to test another image.
Back at IconFinder I found another PNG, this time with lots of gradients and complex transparencies. Original files size was 11.1 KB (let’s call this one Transparent Ball). Once again running it through both services, TinyPNG came out in front decreasing its file size by 47% to 6 KB, while ImageOptim managed a smaller yet respectable 27.9% decrease to 8KB.
Another test I decided to tried was running the compressed images through the system a second time. TinyPNG’s results actually made the file larger, while ImageOptim did nothing.
So what’s the reason for TinyPNG’s better numbers overall? Their website states that they can’t spot any visual difference between the original image and their compressed image. However, when I ran the test using the Transparent Ball from IconFinder I noticed that TinyPNG’s compression did have some visual degradation while ImageOptim’s did not, thus explaining the better numbers from TinyPNG.
At this point I decided to experiment by combining compression techniques. Taking the last image I used (Transparent Ball), I ran the compressed versions through their competitor’s service. My results were interesting. From TinyPNG to ImageOptim there was an additional 3.6% decrease for a total file size of 5.7 KB from 6 KB. And from ImageOptim to TinyPNG there was an additional 26% decrease for a total file size of 5.9 KB from 8 KB. Running the image though TinyPNG first, then ImageOptim, yielded the best results in both file size and quality.
So what are the differences? Besides the numbers and one being a web service and the other being a desktop application, both are free and both allow batch compressions. The downsides of TinyPNG are that it only compresses PNGs and there is no batch download, so you will have to download the compressed images one at a time. ImageOptim can compress all types of images, but be careful. By default the application will overwrite your original files. There is a preference that will backup the originals, so be sure to turn it on if you don’t want to lose them.
So which one is better? If I had to pick one, TinyPNG does a better job of compression and most people wont notice the loss in quality, but given the time and resources, I would use both, running everything through TinyPNG first and then ImageOptim.
So there you have it. Now you have no excuse not to compress your images before putting them online.
Note: If you are ever in a situation and need to edit one of your compressed images, because you don’t have the original, you will notice that opening the files in Photoshop will give you an undesired result (inaccurate transparencies). The reason for this is because the compression technique strips out some of the alpha data that Photoshop needs to display the image correctly. To solve this, open the image in a program that displays the image correctly (for example: Preview on the Mac) and save the image as a copy with the alpha information intact. Now you can open it in Photoshop and edit away. Also note that the numbers in this article where for the specific images used and that different images will give different results.