Pablo Hoffman

Introduction

This is a quick dirty howto to create transparent PNGs compatible with Internet Explorer using The Gimp.

First of all let's clarify some things... At the time of this writting (Nov 2005) Internet Explorer, sadly, still doesn't support 24-bit with alpha channel. And that must be one of the most horrible lacks of IE, if not the worst. It becomes a nightmare for us, web designers, since we're restrained from such a great tool that the 8-bit alpha channels are.

This bug even make people think that IE doesn't support PNG transparency at all, but that's not true. Fortunately (duh!) Internet Explorer do support transparent color with indexed color PNGs, so the trick is to find a middle point: a solution which behaves reasonably well with both the pre-historic IE and any regular modern normal browser (Opera, Firefox, OmniPage, Safari, et.a) which do support 8-bit alpha channel.

Well, sadly, the less complicated solution (though not the best one from a designer's point of view, certainly the best for maintenance purposes) is to stick to indexed color PNGs and use the universal suported 1-bit alpha channel (blame Microsoft for this shit).

So, how do we convert a full blown 24-bit PNG image with a perfect 8-bit alpha channel to a degraded 8-bit PNG with a 1-bit (ie, only one) transparent color while Microsoft gets to fix his crappy browser?. Well, it depends on which program you use to work with images. I use Gimp, so I'll give you the recipe for that program. In Photoshop you can just save the image for web (via File - Save for Web) and select an indexed color palette.

Also, to avoid harsh image borders we'll create an indexed color PNG image that blends nice with your particular background page. Therefore, it won't fit all backgrounds the same way. Your background doesn't need to be a solid color (you'll hardly need transparency there) but it should be made of similar tone colors, like for example, if your page has a light greyish background you would select #eeeee or #cccccc for the solid background. Remember, this is only to generate the antialiasing in your image borders in order for the image to blend more nicely.

First of all, remember to backup the original 24-bit PNG for later use when the long-awaited Internet Explorer 7 is fully deployed and widely available. One thing I can't figure out is why oh why Microsfot hasn't release a patch yet to fix the stupid issue buy, anyway, let's move on. Here's the receipt for The Gimp:

The steps

1. Open the original image (whether it is a 24-bit PNG, a SVG, or whatever)
2. Select a proper background color (see the introduction above for details) and create a new layer with that background color (Layer - New layer - Layer fill type: background color). Then exchange the layer order and keep the background layer below (Dialog - Layers - select background layer - hit the Down arrow)
3. Flatten the image (Image - Flatten image)
4. Add an alpha channel (Layer - Transparency - Add alpha channel)
5. Select the background color (using Selection - By color) and clear it (Edit - Clear)
6. Convert the image to indexed color (Image - Mode - Indexed color, default settings should be fine). You may notice a background color halo around your image. That's fine, cause it will create an anti-aliased effect once you use put the PNG on your page and it's much better (believe me) than having ugly harsh edges.
7. Save the image to the final PNG file (File - Save as) and remember to check: Save color values from transparent pixels

That's it.

Like it?. Useful?. Redundant?. Comment. Thanks.