PNG Alpha Transparency Across Browsers

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, on the other hand, 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 for Windows 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.