Our (beloved) designer keeps creating PNG files with transparent backgrounds for use in our applications. I'd like to make sure that this feature of the PNG works in "older" browsers as well. What's the best solution?

edits below

@mabwi & @syd - Whether or not I agree about the use of a PNG is not the point. This is a problem that I need to solve!

@Tim Sullivan - IE7.js looks pretty cool, but I don't think I want to introduce all of the other changes an application. I'd like a solution that fixes the PNG issue exclusively. Thanks for the link.


I might be mistaken, but I'm pretty sure IE6 and less just don't do transparency with PNG files.

I have two "solutions" that I use. Either create GIF files with transparency and use those everywhere, or just use them for IE 6 and older with conditional style sheets. The second really only works if you are using them as backgrounds, etc.

you are mistaken
Salvin Francis
use CSS filters to allow png transparency in IE 6
Salvin Francis
+2  A: 

IE7.js will provide support for PNGs (including transparency) in IE6.

Tim Sullivan
I tried many solutions, but this one really did the job! And has many other neat features as it tries to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.
therefore i recommend it to everyone! (sorry for the extra comment)
+11  A: 

Here is a great article that explains and shows how to handle PNG transparency in older browsers:

That article is quite dated and uses very lame browser detection. There are much more elegant solutions than this, e.g.

I believe all browsers support PNG-8. Its not alpha blended, but it does have transparent backgrounds.

the question was obviously about 24 bit PNGs...
You're obviously prone to assumptions. And my answer stands as a viable solution to his problem, whether you downed it for a stupid reason or not.
PNG-8 *can* be alpha blended. You're probably referring to bug/limitation in Photoshop.
+4  A: 

I've found what looks to be a very good solution here: Unit Interactive -> Labs -> Unit PNG Fix

update Unit PNG is also featured on a list of PNG fix options on NETTUTS

Here are the highlights from their website:

  • Very compact javascript: Under 1kb!
  • Fixes some interactivity problems caused by IE’s filter attribute.
  • Works on img objects and background-image attributes.
  • Runs automatically. You don’t have to define classes or call functions.
  • Allows for auto width and auto height elements.
  • Super simple to deploy.
Ian Robinson

I might be mistaken, but I'm pretty sure IE6 and less just don't do transparency with PNG files.

You sort of are, and you sort of aren't.

IE6 has no support natively for them.

However, IE has support for crazy custom javascript/css and COM objects (which is how they originally implemented XmlHttpRequest)

All of these hacks basically do this:

  • Find all the png images
  • Use a directx image filter to load them and produce a transparent image in some kind of format IE understands
  • Replace the images with the filtered copy.
Orion Edwards
+2  A: 

I've messed with trying to make a site with .pngs and it just isn't worth it. The site becomes slow, and you use hacks that don't work 100%. Here's a good article on some options, but my advice is to find a way to make gifs work until you don't have to support IE6. Or just give IE6 a degraded experience.

Lance Fisher
+1  A: 

Using PNGs in IE6 is hardly any more difficult than any other browser. You can support all of it in your CSS without Javascript. I've seen this hack shown before...

div.theImage {
    background  : url(smile.png) top left no-repeat;
    height      : 100px;
    width       : 100px;

* html div.theImage {
    background  : none;     
    progid:DXImageTransform.Microsoft.AlphaImageLoader(src="layout/smile.png", sizingMethod="scale");

I'm not so sure this is valid CSS, but depending on the site, it may not matter so much.

(it's worth noting that the URL for the first image is based on the directory of the stylesheet, where the second is based on the directory of the page being viewed - thus why they do not match)

+2  A: 


that's all fine and dandy if you know exactly all the files (and the dimensions of each) that you're going to be displaying - it'd be a royal pain to maintain that CSS file, but I suppose it'd be possible. When you want to start using transparent PNGs for some very common purposes: a) incidental graphics such as icons (perhaps of differing size) which work on any background, and b) repeating backgrounds; then you're screwed. Every workaround I've tried has hit a stumbling block at some point (can't select text when the background is transparent, sometimes the images are displayed at wacky sizes, etc etc), and I've found that for maximum reliability I'll have to revert to gifs.

My advice is to give the PNG transparency hack a shot, but at the same time realise that it's definitely not perfect - and just remember, you're bending over backwards for users of a browser which is over 7 years old. What I do these days is give IE6 users a popup on their first visit to the site, with a friendly reminder that their browser is outdated and doesn't offer the features required by modern websites, and, though we'll try our best to give you the best, you'll get a better experience from our site and the internet as a whole if you BLOODY WELL UPGRADED.

in 2009 so far our site is getting 13% of people using IE6. this traffic is coming almost exclusively from facebook right now - so about 13% of your average facebook users are on IE6. sux but thats the reality
The site I maintain has got about 40% IE7, 32% IE6 and 18% Firefox.
+4  A: 

Also paletted 8-bit PNG with full alpha transparency exist, contrary to what Photoshop and GIMP may make you believe, and they degrade better in IE6 – it just cuts down transparency to 1-bit. Use PNGNQ (improved version) to generate such files from 24-bit PNGs.

It took me quite a while to figure out that 8-bit PNGs are supported in IE6. Useful info.
Said 8-bit PNGs with an alpha channel can be exported from Fireworks easily. In the "Optimize and Align" palette, select "PNG 8" and "Alpha Transparency". I cannot find this ability in Photoshop (as of CS3).

One thing to think about is Email clients. You often want PNG-24 transparency but in Outlook 2003 with a machine using IE6. Email clients won't allow CSS or JS tricks.

Here is a good way to handle that.

Glen Lipka

If you export your images as PNG-8 from Fireworks then they'll act the same as gif images. So they won't look shitty and grey, transparency will be transparency but they won't have the full 24 bit loveliness that other browsers do.

Might not totally solve your problem but at least you can get part way there just be re-exporting them.