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.

Try out punypng (as a short url: http://www.punypng.com works as well)

How punypng came about

punypng actually started not as a need at Gracepoint Fellowship Church, but rather at my day job.  At the Ask.com User Experience Team, we believe down to our toes that design is about craftsmanship.  Our designers are obsessive about detail, and though few notice, everything is “pixel-pushed” — no stray pixels, no unnecessary colors.  A big part of search is fast page load times.  Every search experience team (Google, Yahoo, etc) knows that the faster the page loads, the more loyal your users will be over time (if you don’t by now, well, now you know).  The Ask.com team previously relied on Yahoo’s smush.it service (no shame, Yahoo dev tools are great and a huge asset to everyone), which was very impressive, but for our day-to-day work, we wanted something that was made for designers by designers.  So after a few sleepless nights thinking how I can make my PNGs smaller, I decided to start on the punypng project.  Fast forward a month later, punypng is now the bread and butter tool among the Ask.com UX designers (and the Gracepoint designers as well)

The specialness of punypng

I don’t claim that punypng is for everyone.  I wanted a tool made for designers, and so I also left out a lot features (for now) such as an API or fetching images via URLs (I assume all original assets are on your hard drive not on some website).  But though lacking in these small ways, it does boast some great features:

• Fully supports for PNG, .GIF, .JPG
• Clear affordances for # of bytes saved (as well as being pretty bar graphs)
• JPEG Compression — punypng doesn’t leave JPEGs out in the cold.  JPEGs are analyzed to see if a compressed PNG format is better (ex: JPEGs with heavy solid areas benefit from this).  But if not, don’t despair, punypng is backed with jpeg-tran and jpegoptim for further JPEG optimzation.
• “Fire-and-forget” batch processing: You can upload up to 50 files in a single session.  Optimized versions are clearly labeled, and if no further optimization can be made to the uploaded file, you get the original back untouched.  After you upload a batch, you can go ahead and upload another batch without having to reload the page.
• Download batch jobs as a single time-stamped ZIP.
• See the changelog for future updates

The future

I don’t know what the future holds in store for punypng.  Please let me know if there’s some enhancement or new feature that would help your day to day work.  punypng has relentless commitment to making every png as small as possible, so barring enormous CPU requirements, let us know if there’s some experimental binary out there that we can include. The great thing of an online tool vs a desktop tool is that we can constantly improve the performance and efficiency of the compression as new algorithms are made available.  Just today I found a way to squeeze out 3-5% more.

Help support punypng

Well, every Gracepoint After Five project is free to the world, and is our belief, that all the little tools we build will end up benefiting the church at large (as well as my team at Ask.com of course).  Running a CPU-intensive site like punypng isn’t cheap.  Please help support the cause.  If not, please help spread the word.  Our gratitude to you is non-puny.

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