Transparent PNGs in IE6 (when does it end!!!)

When transparent PNGs look ugly in IE6, your first step should be to use the AlphaImageLoader Filter, or use one of the ready-made JavaScript snippets, like the excellent pngfix.js script.  But those scripts may be complicated to use, and if you have a lot of images (e.g. icons in a list) the filters will slow down your page.  Then you can use the GIMP to make a transparent PNG with background color:
  1. Open the original image.
  2. Set a proper background colour as oposed to it being transparent. It is best to make this colour similar to the background colour of the website to generate the antialiasing in your image borders in order for the image to blend nicely.
  3. Flatten the image (Image - Flatten image).
  4. Add an alpha channel (Layer - Transparency - Add alpha channel).
  5. Select the background color (Selection - By color).
  6. Clear the background colour (Edit - Clear).
  7. Convert the image to indexed color (Image - Mode - Indexed color).
  8. Save the image to the final PNG file (File - Save as) and remember to check: Save color values from transparent pixels.
Thank you Matthew!



P.S. And yes, there are still people out there using IE6.