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″

As you can see, pngnq had the best results and therefor I’ll use it for the next step.

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.

I’ve installed today a new svn, trac and a websvn at work on a ubuntu machine with plesk on it. Actually it’s really easy but there seems to be no instant-setup guide, so I had to google quite extensive. Well I haven’t configuered it fully yet, but the svn seems to work fine, even though I’d like to make use of the pre-commit-hook (having the users commenting the commits, with at least 3 words); but that’s something I’ll change later. Currently we use mantis as bugtracker but I see some requirements for more. Trac seems to be a good alternative. Personally I’d like to use JIRA and Confluence – but I am to lazy to convince my boss to buy it and of course – 2400 Bucks *is* < insert the f-word here > money.

However – my work-life balance *seems* to be *unbalanced* and the affected personal relationships seems to truely suck atm; But therefor my boss said he’s satisfied with my work – and I have only 7 days left until the employment probation period is over and I am fully employed. – I guess that would be a classic scenario of a double-edged sword.

< insert your favourite f-word right here >

A Project manager recently emailed me about a non working link but without to mention which link he was taking about, so I replied: «What kind of link, in what situation – how can I reproduce it?» – After a short while he sent me a screen shot and said it would happen when he clicks on a flash file. (Why does he bother me? He has sent me the flash file and someone else created it.)

Nevertheless I am a very kind IT guy and explained the issue to him – So I wrote him that a link to an external resource always consist out of: 1) a protocol name, 2) an instruction for the browser that it is an external resource :// and finally 3) the domain name and last but not least the TLD and optional paths or parameters.

You may call me a fault finder but that’s something that happened not the first time. I guess this is a classic example of: stupid new media. People who are working in the new media should knew what a friggin link is – especially when they are Project Manager of a website!

It took us quite a while until we were all satisfied but now it’s done and you can view it over here:

» http://areal-records.com/

The site relies on prototype, some web 2.0 gimmickry, scriptaculous and the pear framework, a wonderful combine script for CSS and JS. Firefox 3 still needs some »pimping« but for all the other browsers it should work fine, as far as I can tell.

It’s midnight.

My neighbours just had sex – uhh, ahhh, uuhhhh – well for about 4 minutes – not much longer – then they were done. So I’d call it a quickly. I was quite tempted to have a look but I thought that would be indecent and naughty, even though it sounded like a doggy-style However, I’m no voyeur and it’s a hot night and every cool cat wanna have a kitten – or so…

The only reason I’ve noticed them is, our balcony doors are next to each other and both are wide open. But for my excuse, I’m still fixing a database – or better said, I do a modification. for writershops.com I use the world DB from MySQL plus an extra column for the CIA facts book country code. However, I’m still thinking about to extend it with postal codes and make it public to everyone. Maybe. Time-management is not one of my primary attributes so far.

Tomorrow we have “beer and sausage” at our company, which is quite cool – I mean the fact that we do such things on company time and money. Each first Friday on every new month one department is organizing this little event. Last time we had Becks, this time we’ll have Berliner and sausages.

However (I love this word), I’m currently working on a new JavaScript lib, with a carousel, an interactive navigation and some tab switcher, a lightbox, some fx wrapper and other stuff, based on prototype and scriptaculous. That it nothing phenomenal, but I try to keep it slick as possible and of course flexible. ATM you still can apply any function to the callback functions »beforeStart« and »afterFinish«, via one method call. I’ll post the code when I’ve got something like a milestone release, which seems to be end of July.

It took us 3 weeks more than expected(stupid things like a missing index = up to 140 server-load) but since last week medizin-online.de it’s online. YAY! However! Tomorrow we’ll go to Sylt and to be more precise to »List«, relaxing for 3-4 Days at the beach and maybe doing a day trip to Rømø. I really love the northern part of Germany – because that’s where I’m from and »List« is “the northernmost municipality in Germany, located on the North Sea island of Sylt close to Denmark in the district of Nordfriesland in the state of Schleswig-Holstein (wiki)“.

On the way back we’ll visit my family, especially my Grandma, Mom and Cousin, because I haven’t seen them for quite a while. I guess 2 Years for now and plus that: my Dear haven’t seen Hamburg yet! Haha, that’s a lot of things to do in just 5 Days. 3 Cities and approximately 1.000 km by car – but the beach will excuse everything

It took a while but it’s finally online. Just abuse your mouse and click on the screenshot below to view the site. Nothing special and I’ve saw a few minutes ago I gotta fix some stuff but visually it’s ok and everthing seems to work. SBM is my first project I’ve done with struts. I do not like struts that much – actually it sucks IMHO but that’s just me

I’m currently working on the medizin-online.de relounge and that’s a lot of work. Really – believe me Once again I fight my dislike for the IE and hate it how the IE6 displays certain elements but I love the Papyrus we’ve bought yesterday and hope the red pepper, sunflower, wild flower, herbs and snowflakes will grow nicely. To bad I have to do so much computer related work atm, that the wonderfull sun outside will shine without my physically presence. That’s why I have good music (RA.092 Derek Plaslaiko) on my headphones (AKG K81DJ) and lots of sweets on my desk.

I also feel very comfortable in my new cargo pants (carhartt) and white addidas superstars (v2) …

However – it is Wendsday and I should continue to work on the site mentioned above. The sun IS still shining! ^^