Degradable PNG Transparency for IE6

All (sane) web developers are eagerly awaiting the day Internet Explorer 6 dies. While there are a number of opinions in the community on when we should drop support and how we should encourage users to upgrade, the (sad) fact is that (as of this writing) roughly 25% of the world is still using it. That being said, I am still going to be at a minimum, creating sites that degrade gracefully and function fully for IE6 for some time to come. OK now what were we talking about?

What is PNG Alpha Transparency?

In the old days GIF was the most popular type of image compression for graphics. GIFs did a pretty good job and they still do. However, they only support binary (index) transparency. This basically means it can have transparent pixels, but they must be completely transparent.

Then the PNG started to rise in popularity and developers started taking advantage of the alpha transparency that makes your web graphics look beautiful on any background. The fact of the matter is that PNGs with alpha transparency pretty much open up the possibilities of much more creative web design.

The Problem with IE6 and Transparent PNGs

Well it’s simple, IE6 does not support transparent PNGs correctly. Not only does it not support them, but in most cases it will turn all the transparent and semi-transparent pixels to an ugly blue/gray color that can really muck up a web page (see below for examples).

The Solution

While the world runs on PhotoShop, I like to keep another image editing tool in my back pocket: Adobe Fireworks. Fireworks has many of the same features as PhotoShop, and now that they are both under the Adobe roof they are getting even more similar. However, Fireworks has one tiny additional feature that makes all the difference in this case.

  1. Open or create your graphic in Fireworks (on a transparent background).
  2. Select the “Preview” tab.
  3. Be sure the Optimize toolbar is open (window > optimize).
  4. Then select “PNG 8″ and “Alpha Transparency”.

That is the main key right there. Use 8bit and not 32bit. Photoshop does not offer alpha transparency with 8 bit images, but Fireworks does. And for some reason IE6 renders transparent and semi-transparent pixels of 8bit PNGs as fully transparent. So while it isn’t a perfect alpha transparency solution, it degrades gracefully by eliminating the ugly blue/gray color it puts on all transparent or semi-transparent pixels of 32bit PNGs, and it give the image binary transparency. It also saves you from implementing a hack solution to fix the PNG.

Examples

Most modern browsers support alpha transparency natively. This includes Firefox, Opera, Safari, Chrome and IE 7+. Here are 2 examples of the same image saved as 8 bit and 32 bit in Adobe Fireworks shown on a white and colored background. They both have full alpha transparency, and look about the same. Since the 8bit supports less colors it is naturally a smaller file size as well. Note how on the example with the angled background, the shadow is nicely transparent to the page behind it.

Modern Browsers

What IE 6 Sees




So you’ll notice that in IE6 in the 8bit example, the alpha transparent shadow does not work. However, all of these semi-transparent pixels become fully transparent. This gives a much better effect than the 32bit option which renders all the transparent pixels an odd blue/gray opaque color. So while the shadow and antialiasing don’t come through, it’s a great option for degradable png transparency for IE6 that doesn’t use javascript or any other hacks that leave a bad taste in a web standard enthusiast’s mouth. Now while this surely isn’t a solution for every situation, we’ve found it a very usefull way for degrading gracefully for IE6 while avoiding waisting our time implamenting fixes for a dying browser.

Did you enjoy the post? Why not or subscribe to my RSS feed?

23 Replies to “Degradable PNG Transparency for IE6” Reply Now »

Jul 10 2009

Fawce says:

11:10 am

Wicked tut man, IE6 is def on its way out and this is by far the best way of dealing with it.
Props.

Jul 10 2009

Samiotics says:

12:42 pm

Very intelligent way to handle the issue. You went to the source, didnt even think hack. Awesome job.

Jul 13 2009

Eric Roberts says:

11:46 pm

This is a great idea for working around the IE6 transparency issues, but I have two counter-points / complaints about this:
- People create the drop shadows and similar effects using 32-bit Alpha because they want them in their designs.  Using this technique effectively eliminates part of the work the designer has put into their design.  Just because IE6 is older and crappy doesn’t mean the user should be forced to see a crappier website.
- There are some good “hacks” available for IE6 PNG fixes, the best of which do not involve using any poor hacks, just conditionals and Javascript.  Implementing these not only takes less time than re-optimizing all your graphics, but they will keep your website looking exactly the same for IE6 users.
Your recommendation is a creative solution that does not involve extra code, which will definitely work well for some people.  It also teaches about other features of software that some people might’ve written off as pointless since they have Photoshop.  Thanks for sharing!

Jul 14 2009

Jesse Schoberg says:

12:47 am

@Eric – Thanks a lot for your feedback!

1. Yes you are correct that ie6 users do not get the full experience with this method. That’s why I call it degradable. While the pngfix solutions do work well, eventually we need to stop putting in extra javascripts and other things for ie6. I mean we’re not still creating layouts with tables because Netscape 4 doesn’t support CSS are we?

2. I’m not saying we should go back and pull out the fixes and re-optimize our images. I’m looking ahead with this. We’ve been using it on a number of sites recently and optimzing them this way the first time. If I have a complicated dropdown menu with a nice drop shadow, it’s not imperative that the deminishing ie6 users see it. And in complex situations even the best PNG fixes can be a real pain. Another great spot we’ve been using this is where we’ve been using photo overlays to create rounded corners and the like. Then the only part that is alpha is the anti-aliased edges. It’s been really slick for that. See the rounded corners on the New Arrivals boxes at Fanny Garver Gallery and the Home Page Carousel at Dane County Credit Union.

Jul 15 2009

Jason says:

4:49 pm

Thanks for the solution Jesse. This came into play for me today. I’m working on a site and I have one transparent png image. I didn’t want to drop in a png fix just for this one small image.
I use GIMP and I was able to do this by using Image -> Mode -> Indexed. I’m far from a graphics expert so I don’t know of the effects of doing this with GIMP on other images, but it worked great for this small image and saved me time.

Jul 15 2009

Jesse Schoberg says:

5:48 pm

@Jason – I was quite excited that you’d found an open source option for users that do not have Adobe Fireworks. So excited in fact that I downloaded GIMP to give it a shot.

Unfortunately however, it looks like GIMP only supports Index Transparency on 8 bit images. So this will make the PNG look like the ie6 8bit example above for all browsers. Now depending on your situation this may help, however it doesn’t look like GIMP supports true Alpha :(

Sep 11 2009

Jimmer says:

7:12 am

Cool thx a million for this. I ended up taking it a step further as my degraded version in IE6 wasn’t looking good enough for the job. So I made a version that was pass-able with a static background and saved it as a JPEG file. Then used PHP to check for the browser type and echo the file extension in the image tag src attribute:
<?= ereg(‘MSIE 6′,$_SERVER['HTTP_USER_AGENT']) ? ‘jpg’ : ‘png’; ?>
So IE6 renders the static background version.

Oct 29 2009

DilutedImage says:

12:00 pm

Photoshop will do PNG-8 transparency.  Though not available via “Save As”, it can be utilized via “Save for Web & Devices”.  If you haven’t used this feature yet, check it out; there’s a lot of great stuff there.   2¢

Oct 29 2009

Jesse Schoberg says:

2:44 pm

@DilutedImage – While Photoshop does support PNG-8 with Transparency it only supports binary (index) transparency similar to a gif. So as far as I can tell the only program supporting the alpha transparency with PNG-8 is Adobe Fireworks. Thanks for your feedback!

Jan 21 2010

Pritam says:

2:40 pm

@Jesse, your explanation seems pretty clear, but this did not seem to work for me. Let me tell you the steps i did, basically I am a photoshop user never looked into fireworks but what i did was this i had created the transparent graphic in photoshop,  after reading your article I imported the transparent graphic psd into fireworks and followed the above instructions but it did not work the grey patch shows up in IE6.
Another thing I tried was trying to flatten the photoshop file by changing it to index color but again this did not work. Would appreciate if you could point out where I could be going wrong.
Cheers !!

Jan 21 2010

Jesse Schoberg says:

2:44 pm

@Pritam, I would try saving for web the file in Photoshop as a 32bit PNG first. Then open the fully transparent PNG in Fireworks and follow the export instructions above. That should do it for you :)   BE SURE you select 8 Bit and Alpha Transparency

Jan 21 2010

Pritam says:

3:12 pm

@Jesse, Thanks for your quick response i opened the transparent png instead of importing the psd and followed your instructions and it worked,  Thanks once again ;)

Mar 20 2010

Doing It In Photoshop says:

3:50 pm

Someone recently figured out how to do this in Photoshop:
 
http://cubicspot.blogspot.com/2010/01/transparent-png8-is-solution-to-ie6.html
 
And this article covers how to keep your high-color, 24-bit images if they are going to reside on a solid background:
 
http://cubicspot.blogspot.com/2010/03/pseudo-transparent-24-bit-png-in.html

Jun 22 2010

Rob says:

6:02 pm

Awesome! Worked for me…great tip;thanks!

I am wondering though how to handle the quality of the graphic, because the PNG 8 setting comes out looking like a GIF file, and we all know what GIF transparency looks like; horrible! sooo jaggedy.

Jun 23 2010

Jesse Schoberg says:

6:10 pm

@Rob

Hi Rob.. you are missing the point a bit. If you export with the settings I explain with Adobe Fireworks then you DON’T get the jaggedy except in IE6.

Jun 30 2010

Rob says:

2:15 pm

Hi Jesse, I’ll have to try these steps again. Actually, I did use all the steps outlined above. I’m using IE Tester and in versions IE 6 and earlier, the graphic is jaggedy.

It could just be a browser cache problem…in which case I’ll dump the browser cache again.

Thanks for the follow-up,
Rob

Jun 30 2010

Jesse Schoberg says:

2:18 pm

@Rob I guess I misunderstood you before. It WILL look like gif transparency in IE6 and will be true alpha in all other modern browsers. That is why this is called “degradable” meaning it makes the pixels transparent but not alpha transparent. You follow?

Jun 30 2010

Rob says:

2:26 pm

No worries Jesse!

Ahhhh, I gotcha now. I must have not understood the term “degradable.” It makes sense now that I understand.

-Rob

Oct 19 2011

Scott says:

11:06 am

I have recently written this article to show you how to export png 8 in Fireworks. http://tocs-i.com/blog/how-to-export-transparent-pngs-from-fireworks-that-have-a-small-file-size-and-work-in-ie6/

Leave Your Response

If you want your own icon get a gravatar.

About Schoberg

Jesse Schoberg

Jesse Schoberg is a web developer. He founded LJ Host in 2001. He has a passion for CSS and other web technologies.

More About Schoberg