PNG Image Optimisation

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 300x300, 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.