PNG Alpha Transparency Across Browsers

UPDATE:The market share of IE6 is very much in decline. As of this writing (June 2010) according to W3 Schools it's about 7%, although that reflects the visits to the W3 Schools site and may not be representative of any other given case.

I suspect—although I have no proof—that the retention of IE6 in the market is in part due to corporate workstations not being upgraded from Windows XP to Windows Vista. With the advent of Windows 7, and corporate movement to upgrade, I expect the incidence of IE6 to decline further in the near term.

How much this reflects on your site development, however, will depend upon your target demographic. Personally, unless I have good reason to expect otherwise, I no longer use the methods detailed here, I just use PNG-24 and accept that a minority audience may not see things as they were planned.

One of the major strengths of the PNG image format is its support for alpha transparency. This means that an image can support a variable transparency rather than the limited binary transparency of the old GIF format.

But, there is a fly in the ointment, and its name is Internet Explorer. As of version 6, Internet Explorer does not support alpha transparency in 24-bit PNG image files without the use of a Microsoft non-standard style filter. Without this filter, Internet Explorer shows the alpha transparency as a grey background.

The first of the three images below is actually one image laid over another. The top image is a 24-bit PNG with a transparency gradient. A browser that supports alpha transparency will show part of the underlying image through the upper image's transparency (second image). IE6, and earlier versions, completely blocks the underlying image (third image.)

image of house and tree image of gradient with transparency
image of house and tree with variable transparency PNG overlaid as seen in a browser supporting 24-bit alpha transparency in PNG images image of house and tree with variable transparency PNG overlaid as seen in IE6

In order to make Internet Explorer display alpha transparency in PNG images, the image has to be applied as the background to an object using the AlphaImageLoader style filter. Unfortunately, only Internet Explorer for Windows (as of version 5.5) recognises this filter, so this technique is useless to deliver content to other browsers.

What is needed is a method to deliver PNG images using the style filter for IE5.5 and IE6, and as standard image objects for all other browsers.

There are two approaches that I've examined: image swapping using JavaScript and targeted content delivery with PHP.