Lossless Image Compression with PNGcrush and JPEGtran, What Fun!
By Chongchen Saelee
www.eastfist.com
Originally published Nov. 12, 2009
While working on my own website, I was doing research on increasing the speed of webpage downloads and naturally the topic of image optimization came into play. Like most graphic designers who have easy access to Photoshop, I’ve found it sufficient to use it’s "Save For Web" feature to optimize images for the Internet. However, after reading some claims by more reputable web designers (I assume they are) that two programs could greatly reduce the filesizes of images while retaining lossless quality, I had to see it for myself. Here are the results:
PNGcrush lossless image compression tests
The following chart shows the results of PNG lossless image compression using PNGcrush version 1.6.15 for Windows XP. You can download PNGcrush from here.
| Photoshop Save To Web (original) | PNGcrush compressed |
|
PNG, 24-bit, 94.8 KB, compressed 2 KB |
|
|
PNG, 8-bit, 256 colors, 31.1 KB, no compression |
|
|
PNG, 8-bit, 128 colors, 26.1 KB, no compression |
|
|
PNG, 24-bit, transparency, 11.8 KB, compressed 0.1 KB |
JPEGtran lossless image compression tests
The following chart shows the results of JPEG lossless image compression using JPEGtran via jpegCrop version 2009.04 for Windows XP. You can download JPEGtran here.
| Photoshop Save To Web (original) | JPEGtran compressed |
|
JPEG, Huffman algorithm, 73.6 KB, inflated by 5 KB |
|
|
JPEG, Huffman optimized algorithm, 66.2 KB, compressed 2.4 KB |
|
|
JPEG, Huffman optimized algorithm w/ progressive encoding, 64.4 KB, compressed 4.2 KB |
|
|
JPEG, arithmetic algorithm, 61.3 KB, compressed 7.3 KB but is incompatible |
|
|
JPEG, arithmetic algorithm w/ progressive encoding, 60.3 KB, compressed 8.3 KB but is incompatible |
|
|
|
|
|
JPEG, Huffman algorithm, 16.1 KB, inflated by 0.6 KB |
|
|
JPEG, Huffman optimized algorithm, 15.6 KB, inflated by 0.1 KB |
|
|
JPEG, Huffman optimized algorithm w/ progressive encoding, 15.4 KB, compressed 0.1 KB |
|
| JPEG, arithmetic algorithm, 14 KB, compressed 1.5 KB but is incompatible | |
Afterthoughts
PNGcrush seems to be best-suited for compressing 24-bit png images. Notice that the 8-bit pngs produced from Photoshop had no change in filesize after a PNGcrush compression (Photoshop probably already uses same algorithm). However, retaining lossless compression doesn’t do anything for download speed. A png image like the one used above, at a mere 240 pixels by 180 pixels, when efficient shouldn’t be nearly 100 kilobytes to download. So to reinforce graphic designers’ common knowledge of image optimization, png is not the ideal image format for web usage unless it is a small image that retains transparency, for example an avatar or icon.
JPEGtran didn’t impress me. But I was skeptical that it could actually compress an already-compressed jpeg image any further while retaining lossless quality. At best, JPEGtran squeezed out about 4 kilobytes from the lossless jpeg image above. That’s nothing dramatic. Again, a 70 kilobyte jpeg that is only 240 pixels by 180 pixels is too big of a filesize for a speedy download. So my final vote still is with Photoshop’s Save for Web optimizer. Sure, for the sole purpose of distributing lossless images online, to make downloading less of a burden for low-bandwidth Internet users, one should use one of these optimizers to reduce the download size to as less as possible. However, for the best web optimization, one should compromise for the more compact and therefore speedier lossy images. When compressed properly, to the naked human eye, the image doesn’t look any different than the lossless one… unless you’re a robot or greedy for pixels.
All images are Copyright © Chongchen Saelee. Please do not use without my permission.
Tags: compression, image, jpeg, JPEGtran, jpg, optimization, png, PNGcrush, web images