To some devel­op­ers, the title of this post might well read “Uni­corns exist! News at 11!”. Excit­ing stuff, but not widely known in my expe­ri­ence. Not that uni­corns exist in my expe­ri­ence. I digress.

The colours below are the palette gen­er­ated with indexed trans­parency (left) vs. true alpha trans­parency (right) in a 256 colour 8 bit PNG by a lovely piece of soft­ware called Fire­works. Let me explain.

I’ve joined a new UI devel­op­ment team this past week that require pretty broad-based browser sup­port for a bunch of sites (i.e. IE6 expe­ri­ence needs to not suck) and their process includes a PNG quan­ti­za­tion step before hit­ting a live envi­ron­ment. This is cool, but the IE6 sup­port neces­si­tates not using alpha. Or so I’m told.

This prompted me to look up some­thing that I dis­cov­ered prob­a­bly around a year ago but never got around to writ­ing it up, nor par­tic­u­larly practicing!

I can’t remem­ber where, exactly, though sus­pect Dave Shea might’ve had a pointer or an arti­cle that pre­sumed knowl­edge of the tech­nique. In the process of writ­ing this arti­cle, I’ve also redis­cov­ered a Site­Point arti­cle on the issue that’s quite helpful.

The bot­tom line is PNG-24 is great but imprac­ti­cal in older browsers for a host of rea­sons. While 8 bit PNG is not with­out its lim­i­ta­tions (c’mon, 256 colours ought to be enough for any­one!), it’s clear that for grace­ful degra­da­tion and mar­ginal improve­ments in file size it’s stil worth considering.

In terms of cre­at­ing images there are a few chal­lenges. First and fore­most, every­one uses Pho­to­shop but Pho­to­shop sucks at save-for-web’ing 8 bit PNGs: you just don’t get the options you need. Fire­works hands you this in spades. I’m no Fire­works pro inso­far as work­flows and just get­ting designs done goes, so typ­i­cally I’ll save for web to a 24bit PNG from Pho­to­shop and then open that in Fire­works to export the alpha 8 bit image.

The Site­point arti­cle linked above sug­gests that [some] quan­tiz­ers will give you the chance to do the same thing, but the issue is if you’re export­ing an 8 bit PNG in the first place you’ve already lost the chance to cre­ate an image with alpha. Most front end devs will want to pre­view things like dithers, colour band­ing, etc., so hand­ing con­trol over to a CLI tool just isn’t going to fly. I’d con­tend that Fire­works is really the only viable solu­tion in that it bal­ances image opti­mi­sa­tion and con­trol. Of course, you’re wel­come to run the PNG Fire­works out­puts through a quan­tiser: it’s already 8 bit so your palette is locked in, and the quan­tiser is unlikely to mess with the alpha if it pur­ports to sup­port this.

The rea­sons are broader than just browser sup­port: in my (lim­ited) test­ing, PNG24 files could eas­ily weigh in at twice the size of their RGBA 8 bit alter­na­tives. On a 500x500px test that gen­er­ated the paletts shown above, file sizes were as follows:

• 8 bit PNG indexed: 7KB
• 8 bit PNG trans­parency: 7.5KB
• 24 bit PNG: 15KB

I’m going to make sure I actu­ally take advan­tage of this fea­ture in the future, as there are clear file­size ben­e­fits to be had as well as sup­port for crappy, dwin­dling browsers. Sorry, IE6.