HOWTO: cross-browser alpha PNGs

Technology

bulb_png24-nq8.png

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:

  1. Export (“save for web” in Photoshop) your image in the RGBA PNG-24 format
  2. At the command line, run “pngnq filename.png
  3. 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

Comments are closed.

Discuss this article with the rest of the community on our Discord server!
Tagged

ADVERTISEMENT

Maker Faire Bay Area 2023 - Mare Island, CA

Escape to an island of imagination + innovation as Maker Faire Bay Area returns for its 15th iteration!

Buy Tickets today! SAVE 15% and lock-in your preferred date(s).

FEEDBACK