Hackszine.com: HOWTO: cross-browser alpha PNGs

HOWTO: cross-browser alpha PNGs

If you're a web designer, here's a tool that's going to make your life a lot better. Seriously, in no time you'll be dropping shadows like Galileo dropped the orange.

Transparent GIFs only have a single bit of transparency—a pixel is either totally transparent, or it's completely opaque. 24 bit PNG images, on the other hand, have a bona fide alpha channel, allowing your images to have a full range of transparency. Problem is, they have poor browser support in IE.

The indexed PNG 8 format is similar to the GIF format, and I had always thought that it only allowed boolean transparency. It turns out the PNG 8 format is a little more clever. You still have a 256 color index palette like the GIF format, but the format allows for each index to have its own transparency level, and that level can be set at any amount of opacity!

Here's the real kicker. Even old versions of IE support the PNG 8 format to some degree. So on Firefox, Safari, and IE 7 you can have full alpha support without using any of the quirky IE specific PNG hacks. Older versions of IE will still display your alpha PNGs, but they will revert to a GIF-like all or nothing transparency. Any portion of the image which is semi-transparent will be forced to fully transparent.

To sum it up, the PNG8 alpha format gives you complete cross browser alpha transparency for all modern browsers, and it degrades gracefully for older versions of IE that some people may still be using. As an example, the image above is a semi-transparent PNG8. Most of you will see the blue gradient fade around the edge of the light bulb. Those of you with older versions of IE will see a hard edge around the bulb, similar to what you'd get with a GIF.

Correction: my example is a little goofed, as the blue in the image obtained a partial transparency during the quantization process. IE users will only see some of the bottom portion of the bulb, specifically colors that didn't match the transparent portion in the RGB space. For normal drop-shadow overlays, this does not usually pose a problem. Remember, though, that converting to PNG8 means bringing thousands of color and alpha values down to 256. If your solid colors get mapped to a partially transparent index, they will disappear in older versions of IE.

A coworker introduced me to this today and showed me how Fireworks has an export option for PNG 8 that enables this full-alpha mode. I hadn't been aware of it, because Photoshop has no such feature, only allowing GIF-like transparency for 8 bit PNGs. Unfortunately, I really ~~hate hate~~ have a hard time with Fireworks, and I don't want to purchase it.

A little searching, though, and I found pngnq, a command line tool that will quantize a PNG24 image into a 256 color PNG8 image with alpha transparency. Here's how you use it:

Export ("save for web" in Photoshop) your image in the RGBA PNG-24 format
At the command line, run "pngnq filename.png"
The image will be converted and the output named filename-nq8.png

To install pngnq, just grab the binary from the link below and copy the pngnq executable to somewhere in your path. In OS X, you can put it in /usr/local/bin and add that to your PATH variable (or just toss it it /usr/bin). The program requires the libpng library in order to run. This isn't pre-installed on a Mac for some reason, so you'll have to build it from source, use Fink, or use the installer at the site conveniently listed below.

pngnq - Link
libpng installer for OS X - Link

Posted by Jason Striegel | Feb 8, 2008 09:51 PM
Web | Permalink | Comments (9)

Comments

Newest comments listed first.

Posted by: John on February 9, 2008 at 3:56 AM

I just fired up VMware and took a look with IE6 - and there's no hard edge to the blub - there's just some blue dots at the bottom and nothing else at all - no bulb!

This might not be as good a solution after all.

Posted by: Aron on February 9, 2008 at 6:12 AM

Why would you not mention the GIMP as a way to convert PNG's to indexed mode. The GIMP gives you a nice choice of dithering and pallet choices. I use this very often not to support broken software like your talking about, but to get the PNGs to compress further.

Posted by: Jason Striegel on February 9, 2008 at 9:16 AM

John, don't blame the program for simple operator error. It looks like during the quantization process the solid blue in the bulb was indexed to a partially transparent color. The program needs to convert the thousands of colors in the image down to 256, so you can expect something like this, especially when the transparent parts are the same color as the non transparent parts... my mistake.

In real-world use, you probably will be using the PNG-8 images to provide drop shadows and overlays over the rest of your html and image content. In this scenario, when loaded in IE6 (or under) everything appears correct except that the shadows are missing. It really is a graceful downgrade, but you do need to be careful with what happens during the quantization process.

Posted by: Jason Striegel on February 9, 2008 at 9:22 AM

Aron, does GIMP have a full RGBA palette for PNG8? I thought it only provided all or nothing transparency in the palette tool (though it loads the images correctly). The pngnq site mentions that a GIMP plugin is high on the list for a future release.

On the compression side, you might want to also check out the pngcrush utility:
http://pmt.sourceforge.net/pngcrush/

Posted by: Ayush Saran on February 9, 2008 at 7:14 PM

Looks like crap in IE6.0 for Me

Posted by: keith on February 10, 2008 at 2:32 PM

also - because the alpha support was so poorly implemented in IE 6 and 7, if you change (via css) the alpha property of a png w/ alpha transparency - or even its parent element for that matter - the transparency will be lost. This affects 8 or 16. This caused me a great deal of frustration on a web project this last summer. For the issues with IE 7, I blame this guy: http://blogs.msdn.com/ie/archive/2005/04/26/412263.aspx . According to him, the whole thing is just a PoS.

Posted by: Felipe on February 11, 2008 at 8:35 PM

The Sitepoint article PNG8 - The Clear Winner and Eriestuff Cross-Browser PNG alpha-transparency were great articles too, but I ran into the same problems with PNGnq as you did.
Fireworks works fine, kudos to former Macromedia for that. As it's the only program, it means you can't edit your PNG in any other program after that, so you'd better keep the original and prepare it in another graphic program if you don't like working with Fireworks ...
And yes one or two hundred dollars is a little expensive for a conversion program, if you haven't already bought a thousand dollars Adobe suite (for Photoshop and Illustrator) !

Posted by: Aynn on July 15, 2008 at 11:52 AM

Sounds great ... but only if

This is exactly what I need. If only I had a clue what you were talking about it would be so helpful.

I've downloaded the files but really don't understand how the UNIX operates on my mac, so I can't install or utilize.

If I could figure out how to put the files where you suggest, I would be able to access the command line through terminal, but I have no idea how to do this.

Too bad for those of us that just like to use our computers.

Posted by: Aynn on July 15, 2008 at 12:47 PM

WHEW ...

After much fighting and lots of referencing, I think I actually figured it out.