I often see that templates are made with transparent PNG images, which show a gray background in Internet Explorer 6, instead of the transparency. However, with a couple of extra steps, it’s easy to create a transparent PNG image with The Gimp that also works in IE6.

What’s up with this bug?

For some reason Internet Explorer 6 does not support 24-bit PNG images with alpha channels. It does support support alpha channels in PNG with indexed colors (so IE DOES support transparent PNG images, contrary what a lot of people think). So the trick is to convert the great looking 24-bit PNG image with a 8-bit alpha channel to an 8-bit PNG with a 1-bit alpha channel.

In this process the assumption is that your image will be used on a non-solid colored background, since if you had a solid background, there would not be a need for transparency. To make the image blend nicely on a gradient background, it’s good to give the image a background color, that comes close to the background it will be against. At the end of the process, there will be an anti-aliasing “border” around the image, so the closer its color is to the background color, the better it will blend. So if your site has a grayish gradient, then you might want to pick a grayish color as background for your image. More on that in the steps.

Since I’m using The Gimp on my Xubuntu Feisty box, these steps are for that application.

The steps

1. Backup your original image (or don’t, it’s up to you)
2. Open the original image (the format does not matter)
3. Select a background color (read above for details) and create a new layer with that background color (Layer - New layer - Layer fill type: background color)
4. Move the background layer to the bottom of the list of layers (Dialog - Layers - select background layer - hit the Down arrow)
5. Flatten the image (Image - Flatten image)
6. Add an alpha channel (Layer - Transparency - Add alpha channel)
7. Select the background color (Selection - By color, then click on the background) and clear it (Edit - Clear or Ctrl-K)
8. Change the image mode to Indexed (Image - Mode - Indexed color, default settings should be fine). You may notice a background color halo around your image. This will create the anti-aliased effect for the PNG image on your page and looks much better than those ugly harsh edges.
9. Save the image to the final PNG file (File - Save as)
10. Make sure the Save color values from transparent pixels checkbox is checked

A very important note

This information was drawn from Pablo Hoffman’s VampiroZ blog. I’ve been looking for this information for a while, and his tutorial was the only one that solved my transparent PNG problem right away.

Some useful links

The GNU Image Manipulation Program (GIMP, available for Windows, Linux and MacOSX)
Rea’s comparison of GIMP vs Photoshop
From Windows to Ubuntu: Alternative software