That browser is old and stupid. It’s not letting us use the latest fancy stuff. It should die!
Yes, we are talking about IE6. Yes, again. There is an ongoing (quite long and dreadful) debate whether to drop support for IE6 or not and when and how it should be done. The reality is that there are (somehow important) people out there using IE6 and we have to show them, as professional web developers, that we are capable of supporting old and dying browsers. My personal hero Noah Stokes has a great article on the subject. Please read.

With that said it’s important to see the difference between supporting and giving the user the same experience regardless of the browser they use. We don’t expect an old cellphone from 2001 to behave like an iPhone. Yes, IE6 is from 2001 so you get my point. As a frontend developer I’m happy to see that people finally start to see this. (Please open this page in different browsers).

Sorry for the long intro. Let’s get dirty. A big problem we have when developing for IE6 is that it doesn’t support PNG-files with semi-transparent backgrounds, shadows and fanciness. Look at the picture below if you don’t know what I’m talking about.
PNG-24 does look dreadful in IE6 compared to FF 3.6
To solve this people have different methods. Implementing PNG-24-fixes with JavaScript, having other images (gifs) especially for IE etc. One method that I really like and which does support the whole thinking of supporting is saving the png-files as a png 8 keeping the fancy stuff for modern browsers while showing the picture without fanciness but perefctly viewable and without disturbing gray background in IE6.
There are different methods to do this. Either you can use Fireworks. But as we all know. It does cost. So you prob want to have somthing for free. If you are on a Windows-machine you can use the GUI for pngquant. http://jedisthlm.com/2004/10/13/gui-for-pngquant/ or if you are lucky and are sitting on a Mac you can use a little program called ImageAlpha.

How to Make It in ImageAlpha

Since I’m on a Mac right now I will demonstrate how to do the saving in ImageAlpha.
1. You start out with having totally cool images with super-awesomeness saved as png-24.
2. You know need to resave these images as png-8. (No, don’t worry fanciness will not be lost… )
3. Open ImageAlpha, and open your picture. It will look somehow like below.

ImageAlpha is a program to re-save png-files

4. It differs which settings that works the best so tweak around a little and try out different combinations. The image below is saved with 128 colors and Median Cut. This might not be right for your images and if you can, try to choose 256 since the more colors the merrier.
5. Save your files and review the result.
Png-file viewed in IE6 and FF 3.6 after being saved in ImageAlpha

Final wordiness

With your sharp look and that 50″ screen you probably noticed that the image in IE6 looks far from perfect. If I had spent a little more time tweaking I think I could have made it look better. Just saying.
Personally I like this method of treating PNG-files. It’s also a really nice one if you like to include images in a newsletter that goes out via email where JavaScript-fixes is not allowed. As said before different methods suits different people/projects. Do some thinking and I’m sure you will end up with the right method to use.

Till next time people.
/Ida