8 bit PNGs with alpha transparency
24 Aug 2011To some developers, the title of this post might well read “Unicorns exist! News at 11!”. Exciting stuff, but not widely known in my experience. Not that unicorns exist in my experience. I digress.
The colours below are the palette generated with indexed transparency (left) vs. true alpha transparency (right) in a 256 colour 8 bit PNG by a lovely piece of software called Fireworks. Let me explain.
I’ve joined a new UI development team this past week that require pretty broad-based browser support for a bunch of sites (i.e. IE6 experience needs to not suck) and their process includes a PNG quantization step before hitting a live environment. This is cool, but the IE6 support necessitates not using alpha. Or so I’m told.
This prompted me to look up something that I discovered probably around a year ago but never got around to writing it up, nor particularly practicing!
I can’t remember where, exactly, though suspect Dave Shea might’ve had a pointer or an article that presumed knowledge of the technique. In the process of writing this article, I’ve also rediscovered a SitePoint article on the issue that’s quite helpful.
The bottom line is PNG-24 is great but impractical in older browsers for a host of reasons. While 8 bit PNG is not without its limitations (c’mon, 256 colours ought to be enough for anyone!), it’s clear that for graceful degradation and marginal improvements in file size it’s stil worth considering.
In terms of creating images there are a few challenges. First and foremost, everyone uses Photoshop but Photoshop sucks at save-for-web’ing 8 bit PNGs: you just don’t get the options you need. Fireworks hands you this in spades. I’m no Fireworks pro insofar as workflows and just getting designs done goes, so typically I’ll save for web to a 24bit PNG from Photoshop and then open that in Fireworks to export the alpha 8 bit image.
The Sitepoint article linked above suggests that [some] quantizers will give you the chance to do the same thing, but the issue is if you’re exporting an 8 bit PNG in the first place you’ve already lost the chance to create an image with alpha. Most front end devs will want to preview things like dithers, colour banding, etc., so handing control over to a CLI tool just isn’t going to fly. I’d contend that Fireworks is really the only viable solution in that it balances image optimisation and control. Of course, you’re welcome to run the PNG Fireworks outputs through a quantiser: it’s already 8 bit so your palette is locked in, and the quantiser is unlikely to mess with the alpha if it purports to support this.
The reasons are broader than just browser support: in my (limited) testing, PNG24 files could easily weigh in at twice the size of their RGBA 8 bit alternatives. On a 500x500px test that generated the paletts shown above, file sizes were as follows:
- 8 bit PNG indexed: 7KB
- 8 bit PNG transparency: 7.5KB
- 24 bit PNG: 15KB
I’m going to make sure I actually take advantage of this feature in the future, as there are clear filesize benefits to be had as well as support for crappy, dwindling browsers. Sorry, IE6.