I did some research at work for PNG image optimization, to find out what are the best tools to compress PNG RGBA to paletted png with alpha channel, that would also fit into a good workflow.
In previous projects it was common to compress each picture individually and that, of course, was a long and repeating process. Screen’s often change during development and if you need to do a task over and over again, you might end up finding a solution that shortens the process.
My goal was find a solution and tools that would cover the following things:
- Tools that are available on linux and OSX from commandline, to execute them via script
- a good compression ratio in a short amount of time
- Tools that transcode from rgba to paletted images with alpha cannel
- Tools that can read, modify (optional) and delete Header-Chunks
- Tools have to be opensourced or must be at least for free
For comparsion I’ve choose the following tools:
- pngcrush [ http://pmt.sourceforge.net/pngcrush/ ]
- pngrewrite [ http://entropymine.com/jason/pngrewrite/ ]
- imagemagic (convert binary) [ http://www.imagemagick.org/script/convert.php ]
- pngnq [ http://pngnq.sourceforge.net/ ]
- pngout [ http://www.jonof.id.au/kenutils ]
- optipng [ http://optipng.sourceforge.net/ ]
Tested Tools
Here is a brief overview of what matters: Short description + usage example. When I mention quantize, i mean the reductions of colors from rgba to a paletted color map with alpha channel.
Pngcrush
Can not quantize as described above but processes fast when optimizing the IDAT Stream.
Usage: pngcrush -reduce alpha24.png alpha24-crushed.png
Pngrewrite
Can handle only paletted images but the result then is very good.
Usage: pngrewrite alpha24.png alpha24-pngrewrite.png
ImageMagick
Comes with a hugh amount of features but is no good choice for compression, it produces partial bigger file sizes than the original. I was not able to archive any good results – thus I’m just mention it here for the completeness, but do not enlist it in the charts.
Pngnq
Can not quantize as described above but works very well for all other purposes.
Usage: pngnq -s1 -e"-nq256.png" -v alpha24.png
PNGOUT
The main feature is quantisation as we want it and it does the job very well. It “Quantizes a 32-bit RGBA PNG image to an 8 bit RGBA palette PNG using the neuquant algorithm”.
Usage: pngout alpha24.png alpha24-pngout-default.png
OptiPNG
Is seems to be very similar to Pngcrush (the Author states that OptiPNG is inspired by Pngcrush) but the results are a little bit better and the arguments differs.
Usage: optipng -full alpha24.png -out alpha24-optipng-full.png
Feature Overview
Benchmark and Comparsion
I’ve taken one RGBA TrueColor image with a dimension of 300×300, with lossless compression. The arguments used, are those in the usage examples described earlier.
Original file size in Bytes “4739″
| tool | size after optimization | Saved Bytes |
| pngcrush | 3954 | 785 |
| optipng | 3953 | 786 |
| pngrewrite | can’t handle format | 0 |
| pngnq | 3344 | 1395 |
| pngout | 4096 | 634 |
As you can see, pngnq had the best results and therefor I’ll use it for the next step.
| tool | size after optimization | Saved Bytes |
| pngcrush | 3344 | 0 |
| optipng | 3329 | 15 |
| pngrewrite | 2604 | 740 |
| pngout | 2866 | 478 |
That means I’ve saved 2135 bytes and the optimised image is only 45,05% of the original file size. In comparsion to ImageOptim, that is a GUI App for OSX and only can save up to 25,5% (74,5% of original file size), the result ist pretty impressing. It is worth to mention, that none of the Adobe Products, besides Fireworks, can produce 8bit-paletted-with-alpha images.
Note:
The optimisation is meant for UI-images. Sprites, buttons, etc – not for user generated content or similar.
Buildprocess
If you need to do a task over and over again: automate it 
My idea is to have a source image in full quality, that gets processed via a script and then gets stored into a destination folder. However, some images needs a special treatment and therefore it makes sense to have a configuration file.
In order to not process images twice, you could modify the iTxt for instance, to mark it as processed and if the image has such header chunk – do not process it. If you drop a new image into the source folder, the image doesn’t have the chunk, thus it gets processed. But that’s just micro-tuning, because pngnq and pngrewrite are fast enough … IMHO … because you shouldn’t have more than 10 – 20 images to process.
