Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

Removing the Grey Background on .PNGs in IE6 Using Adobe Fireworks

Last Update: 8.20.2017

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 lots of opacity variation.

Original Atom .png
Original Atom .png
Original Atom .png
Original Galaxy .png
Original Galaxy .png
Original Galaxy .png

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 browsers which support alpha transparencies.

Exported Atom .png
Exported Atom .png
Exported Atom .png
Exported Galaxy .png
Exported Galaxy .png
Exported Galaxy .png

IE6 Screenshots

Here are screenshots of the original images rendered in IE6:

Screenshot of original images rendered in IE6

And the Fireworks exported images in IE6:

Screenshot of exported images rendered 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 its 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.


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.


Looking for more?

Back to Pew Pew Laser Articles

Contact Me