As I wrote previously regarding dirty transparency, you can use our Photoshop action to create a more optimized PNG.  If you ever find yourself outputting a layer that has been masked, you can look to get some serious savings.

Typical use case where dirty transparency will give you the most savings

This butterfly image above was reduced by 36% when I ran it through the updated dirty transparency compression algorithms in punypng.  This image was only reduced by 7% when dirty transparency was disabled.

One of my Ask.com UX Design buddies was a little skeptical in terms of how dirty transparency would help our team.  He mentioned that our sprite preparation process already optimizes the transparency of our assets;  transparencies are already cut and matted … no hidden image data.  Right? Well, I wasn’t sure either way , so I decided to run a test on our Ask.com sprites.  Our sprites span a good variety of use cases, ranging from full 24-bit color PNGs to 8-bit GIFs to 24-bit hand-quantized, indexed PNGs.  In terms of image data, everything is as tight and pixel-pushed as they possibly can be … transparencies are matted and all masks applied.

Here are the results:

punypng's new support for dirty transparency

The above results speak for themselves.  The results are very surprising!  punypng was still able to squeeze out another 3% of compression on average on top of the existing compression algorithm!

So what’s the catch.  Well, in some minor cases, the dirty transparency technique produced images that were 1-2% larger than usual (though they were still smaller than anything that pngcrush or optipng could ever produce).  However, these were rare cases and the savings as a whole in fact did add up to 10% or more.  In terms of performance, using dirty transparency to compress 15 or more files adds only added 1-2 seconds to the process.

In general, I think it’s safe to say that dirty transparency is a proven technique that warrants inclusion in everyone’s arsenal.  It’s my hope that with this latest addition, punypng can start emerging from the myriad of compression tools on the market as the one-stop tool for designers and web geeks who are serious about making the web more puny.  Give a try and post your comparison results.

Thanks again to Sergey Chikuyonok for his original contributions.  I look forward to adding more of his techniques into punypng.

Update on 10/12/09: PunyPNG supports IE6 using the dd_belatedpng plugin.