punypng now supports Dirty Transparency
Gracepoint After Five’s super-ninja compression tool, punypng, got a new upgrade to help slice and dice the size of your website images. punypng’s compression algorithm now automatically supports Dirty Transparency as described by Sergey Chikuyonok’s awesome article on Clever PNG Optimization Techniques that was recently published on Smashing Mazagine. This unique and innovative technique offers additional compression to any PNG or GIF as long as it has either 8-bit or 1-bit transparency. On average, you can save about 10% more, and in some cases, you will save even as much as 35%!
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.
Related Posts
- Dirty Transparency in PNG Optimization
- New Features in PunyPNG
- punypng: making the web more puny, one png at a time
Tagged as compression, punypng, transparency + Categorized as Our Projects
20 Comments
Trackbacks & Pingbacks
-
punypng
?????????? ?????? ?????? — punypng. ????? ??????, ????? ??????? (?? ???? ?? ????? ???????) ?? ????????? smush.it.
-
Optimize GIF, JPG & PNG Online - Supports Batch Optimization
[...] or GIF that has either 8-bit or 1-bit transparency. It makes you possible to save 10% to even 35%. Read here if you want to know more about this Dirty [...]
-
Puny PNG : Reduce Image size up to 35%
[...] we found another tools called as Puny PNG which uses a dirty transparency trick to remove additional layers which are [...]
-
Puny PNG : Reduce Image size up to 35% | LEHSYS Blogger News
[...] we found another tools called as Puny PNG which uses a dirty transparency trick to remove additional layers which are [...]
-
???? ??? ?????? ??? ???? ??? ????? ????? ?????? | ParsanIT
[...] ????? ?? ??????. ???? ??? ??????? ????? ?? ??????? ?? Gracepoint After Five blog ?????? [...]
-
Ajaxian » punypng: crushing your images even more
[...] Dirty Transparency Support [...]
-
Squishing the Last Drops from Your PNGs
[...] problem. Happily the smart folk at GracePoint After Five have constructed a free online PNG compression tool called PunyPNG that seamlessly incorporates [...]
Sergey Chikuyonok wrote up his recommendation on punypng on his blog as a follow up to the Smashing Magazine article. Here’s the translation in case you’re not fluent in Russian :)
English translation of Sergey’s post about punypng.
Translated it using Babelfish, so it isn’t perfect.
Zdrasviche!
Do you plan to publish a public API for this? It’d be amazing to be able to use this tool and integrate it into a build process. I would also be very interested in a commerical or even better, open source version that could be installed locally.
Thanks for this enhancement. The tool is very impressive and definitely in my toolbox.
Where’s the shell tool ?!
It would be VERY NICE to have a “convert to PNG” checkbox for JPG and GIFs. Yes, I know we can convert them before hand and then use punypng, but it saves a step, plus the tool *is* called punyPNG ;) so it should at least provide the option of spitting out a PNG file regardless of the input image format :)
just a thought…
GREAT JOB though!!! :)
Hi, unfortunately this service doesn’t work behind a proxy owing to limitations in the Flash player’s compatibility with proxies. For example see this thread at SWFUpload’s forum:
http://swfupload.org/forum/generaldiscussion/184
Any chance of offering a form-based uploader as a fallback? Otherwise it’s not usable to us in a corporate environment at this time.
Check out ultimate guide How to Optimize Images for Web with all tools and techniques for PNG, JPEG and GIF optimization in one place.
@alex: I’m looking into a non-flash support as well. Stay tuned!
I would like to see a Firefox Plugin that would use your service.
Great tool, or should I say great proof of concept… Will this tool be for sale, licensing, API? I cannot simply upload images manually either… For bloggers that wants to crunch that ekstra KB this is a great tool, however as a bonus feature in a gallery or CMS how can this be of any benefit at all?
Dont missunderstand me, great tool, however I just can’t see how I can benefit from it…
@Kim: We have a private beta for our API that launched last weekend. Joost de Valk is helping me out by working on a Wordpress plugin for the API. Let me know if you want access to the beta API, and I can set you up.
just fyi – all my (normal) gif images are now a one colored png – is puny broken?!
Thanks for this article. it’s very impressive