Removing the Grey Background on .PNGs in IE6 Using Fireworks
Introduction
.PNG images with alpha transparencies display well in modern browsers, but not in Internet Explorer 6. Many solutions exist, relying on JavaScript, IE's Filters, or Flash. Alex Walker has published an article demonstrating that Fireworks can create .PNGs with alpha transparencies that will be retain their smooth transparencies, while avoiding the grey background seen in IE 6. This article will demonstrate the results of this, and walk you through editing an existing .PNG image in Fireworks to create this result.
Alpha transparency refers to pixels with are neither completely transparent, nor completely opaque. For example, consider a red pixel with 50% opacity. When this pixel is on top of a black background, the resulting color will be a dark red. The exact same pixel over a white background will result in pink. If your .PNGs make heavy use of alpha transparencies, you might get a better result by re-matting the image against the desired background color.
Demonstration
Original .PNGs
Here are two different .PNGs with nice smooth edges, displayed against a black, white, and yellow backgrounds. The atom image has a simple alpha transparency just around the circular edge, but the galaxy image has a very complex edge with great variation of it's opacity.
Exported .PNGs
Here are the same two .PNGs, after having been re-exported out of Fireworks. As you can see, both the original and exported images look the same in alpha transparency browsers.
IE6 Screenshots
Here is a screenshot of the original images rendered in IE6:
And the exported images in IE6:
The atom image looks reasonable, with jaggy edges noticeable only upon detailed inspection of the image. But the more complex galaxy (with alpha transparency pixels everywhere but the core) looks quite bad; because all of it's pixels with any alpha values for opacity were rendered as completely opaque. If your .PNGs have lots of pixels with alpha transparencies, you might get a better result by re-matting the image against the desired background color.
Fireworks Walkthrough
This walkthrough uses Fireworks CS3; adjust accordingly for other versions of Fireworks.
First, open up your original .PNG image.- From the file menu, select Export Wizard.
- On the first Export Wizard screen, leave it set at Select an Export Format, and click Continue.
- On the Choose Destination screen, leave it set at The Web, and click Continue.
- On the Analysis screen, click Exit.
- The Image Preview screen is where the magic happens:
- Set the Format to PNG 8.
- Set the Transparency to Alpha Transparency
- Optionally, adjust the number of colors in the image. More colors is a larger file size, but fewer colors could result in a lower quality image.
- Click Export.
- Specify the directory and filename you'd like to use, and then click Save.
- That's it! The new file you've created is nearly identical to old one in modern browsers, and it won't have the grey background in IE6.
Conclusion
With this solution, a single image will be used for all the browsers, without the need for any extra JavaScript or Flash on the page.
This solution works by adding another color palette to the .PNG file; a color palette that contains only a single transparency value. Each browser uses the selects the color palette it can use, which is why the modern browsers display with no change. IE6, being unable to display the alpha transparency palette, uses the single transparency palette, and all of the pixels with an alpha transparency are thrown out.
As far as I can tell, the ability to save .PNGs with these settings exists only in Fireworks; and not in Photoshop.
Update
I ran across Alex Walker's article about making 'IE6-friendly' PNG8 Images. In it, he uses Fireworks to anti-alias the image against blue, so that the image keeps smooth edges in IE6.
It seems to me that the only advantage to that approach is that it results in only a single file to manage. But adding the blue edging to the image negates a primary benefit to using a semi-transparent .PNG in the first place - that it can be placed on top of any color without jagged edges or a visible halo.