Making IE use PNG Alpha transparency

Deprecated

This fix is deprecated and is no longer supported (meaning that I will not help you to get it working with your pages). It was only written to fill the gap while waiting for Internet Explorer to implement PNG alpha. That has now happened in IE 7. Although this fix can make it work in IE 6 as well, that is counter productive for the future of the Web. IE 6 is a major problem to Web developers (IE 7 is a problem as well, but for now, let's overlook that, since it does at least implement PNG alpha), and the sooner it stops being used, the better.

Instead of using this hack, users of IE 6 should be encouraged to upgrade to IE 7. Users who cannot upgrade to IE 7 (because IE 7 is not being released for most Windows operating systems) should use a better browser, such as Opera or Firefox. They have been abandoned by Microsoft.
What is PNG?

PNG is an image format that combines the best features of GIF and JPG/JPEG, the traditional and most common image formats used on the World Wide Web. PNG is supported by virtually all major and minor browsers that are in use today.
JPEG format approximates the original picture, so the quality can be quite low, but it allows the images to be significantly smaller in file size than the equivalent raw image (pixmap or Windows Bitmap). JPEGs do not support Transparency, but images can have up to 16 million colours. Athough the compression technique uses approximation, for natural photographs, JPEG compression usually produces the smallest file size of any of the standard image formats with the approximation being almost undetectable to the naked eye. However, GIF is more traditionally used when pictures contain large areas of the same colour, as the approximation used by JPEG becomes quite noticeable. JPEG does not support multiple image layers to allow animation, but its related format - MPEG - does.
GIF format reduces the file size of the original image by recognising patterns in the raw image data, effectively making a zipped version of the image. This means the displayed image is identical to the original but requires the image to have a maximum of 256 unique colours. GIF format allows one colour to represent 100% transparency (known as binary transparency). GIF also supports multiple image layers to allow animation.
PNG format compresses images in a similar way to GIF, but images can have up to 280 thousand billion unique colours (normally, a maximum of 16 million colours are used). PNG also supports binary transparency, as well as full Alpha, meaning that each pixel of the image can also have one of 256 different levels of transparency (or 65 thousand levels if you really want to). PNG format produces files with approximately the same file size as the equivalent GIF image, assuming they have the same number of colours. PNG does not support multiple image layers to allow animation, but its related format - MNG - does.
What is wrong with the PNG format?

Well, ... nothing. The problem is that the most popular browser - Internet Explorer 6- for Windows - does not natively understand Alpha transparency, even though Gecko browsers, KHTML/WebKit browsers, Opera, Internet Explorer Mac and several minor browsers all do. It displays normal PNGs correctly, and version 4 and up can handle binary transparency if the palette is saved with the image, but as soon as any Alpha transparency is applied, the transparency is replaced with the image's background colour. This is what Internet Explorer 6- normally shows when a PNG image with alpha transparency is placed over another image (the green box is there just so that you can see what's happening):


But this is what it should show:

'But you said you could make it work!'

And I can! You see, Internet Explorer supports some extra style features for providing transitions and filters to images, so you can do wipes and fade-ins and lots of other tricks that should really be left to PowerPoint. However, two of these can help here. One is the AlphaImageLoader, which applies an image to the background of any element whose height and width are both explicitly set (or if the position: absolute; style is set) and supports full Alpha transparency. It is supported from Internet Explorer 5.5. The second is Alpha, which can be used to provide Alpha transparency to any element, making the element transparent. There are two versions of this filter, one that works in all versions of Internet Explorer 4+ for Windows, and one that works in version 5.5 and above. As the AlphaImageLoader works only from 5.5, I will use the Alpha for version 5.5+ as well. IE 7 does support alpha transparency, so I will exclude it from this fix.

Using these filters this way means that no JavaScript is required, no browser detects are required and no conditional comments are required. All browsers that do not understand Alpha (including earlier versions of IE for Windows and IE5.5/Win with stylesheets disabled - a very difficult thing to do!) will display the image in the non-Alpha format.

You may also notice that I set display:inline-block on the span. This is actually the effect we need, since the span will be displaying the image, and it needs to be allowed to accept size. IE only partially understands inline-block, but fortunately it understands enough to use it here (this is only needed in IE 6 when you use a strict doctype - other versions always asume inline-block when you give dimensions, however it is a good idea to always include it just in case you change doctypes later). Unfortunately this may have unwanted alignment effects in other browsers, but that will be solved by using conditional comments (see below).
<span style="width:400px;height:32px;display:inline-block;
/* the height and width should match those of the image */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='varyAlpha.png');
/* apply the background image with Alpha in IE5.5/Win. The src should match that of the image */
"><img style="
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
/* make the real image fully transparent in IE5.5/Win, so the Alpha image can show through */
" src="varyAlpha.png" width="400" height="32" border="0" alt=""></span>

If you need the image to display at any other size than its natural size, change this:
(src='varyAlpha.png')

To this:
(src='varyAlpha.png',sizingMethod='scale')

And make sure that the size of the image in the IMG tag, and the size of the span match the chosen size.
— Result:



Just make sure that there is no whitespace (tab, space or linebreak characters) between the IMG and the SPAN tags.
Making it validate

This is not valid CSS, and it may cause problems in IE 7. If you want to make it valid, you can put the extra CSS in a conditional comment, and use that to protect IE 7, make it work in IE 5.5-6, and allow your page to validate. However, this would need to contain one CSS rule for each image, as the filter needs to be different for each image. For this reason, I assign an ID to each span, and then use the ID to set the filter.
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
#alImg1 img, #alImg2 img { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); }
#alImg1, #alImg2 { display: inline-block; }
#alImg1 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='varyAlpha.png'); }
#alImg2 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alphaTwo.png'); }
</style>
<![endif]>
<![endif]-->

...

<span id="alImg1" style="width:400px;height:32px;">
<img src="varyAlpha.png" width="400" height="32" border="0" alt=""></span>
<span id="alImg2" style="width:30px;height:50px;">
<img src="alphaTwo.png" width="30" height="50" border="0" alt=""></span>