Opacity of 24-bit PNG Images in Internet Explorer
Although the most recent version of Internet Explorer, version 7, supports alpha transparency in 24-bit PNG images, earlier versions (for Windows) do not. The proportion of users with any given browser will vary from site to site, but some useful general statistics are available at W3Schools.
As of the beginning of 2007, Internet Explorer versions 5 & 6 accounted for about 45% of the browser market, with version 7 at 13%. As of this writing, the most recent statistics are for July 2007, and indicate that the earlier versions have slipped to a little over 38%, while version 7 accounts for 20%. So the days of poor PNG transparency support are numbered, but 40% is still a significant proportion of the market, and of our potential visitors.
Therefore, methods to address Internet Explorer's poor support for alpha transparency are still, unfortunately, relevant. Workarounds have been developed that make use of the AlphaImageLoader filter that was introduced in version 5.5.
Although the problem can be addressed with both server-side (e.g. PHP) and client-side (e.g. JavaScript) solutions, the most common approach (for me, at least) is to use a JavaScript implementation. The downside to this is that as the page is loading, and thus before the swap script has been invoked, the images show up on the page with the ugly grey background.
One way around this is to hide the images, and use an additional JavaScript function to show them after the page has loaded. But this approach is more or less convoluted, and the less convoluted it is the more error-prone it is.
The following approach may be useful. It relies on the fact that objects with the Microsoft Internet Explorer Alpha filter applied and opacity set to zero are essentially invisible on the page, but this transparency is not applied to objects that also have the AlphaImageLoader filter applied.
SRCset to 24-bit alpha PNG in HTML
SRCset to transparent GIF in HTML- PNG applied through the
AlphaImageLoaderfilter in an embedded style sheet - this method will show no image in browsers that don't support the
AlphaImageLoaderfilter, such as Firefox and Safari
-
SRCset to 24-bit alpha PNG in HTML- transparency applied through the
Alphafilter in an embedded style sheet - this method will show no image in browsers that support the
Alphafilter, such as Internet Explorer, and it's added for illustrative purposes only
-
SRCset to 24-bit alpha PNG in HTMLSRCchanged to a transparent GIF by a JavaScript function- PNG applied through the
AlphaImageLoaderfilter by a JavaScript function
-
SRCset to 24-bit alpha PNG in HTML- transparency applied through the
Alphafilter in an embedded style sheet SRCchanged to a transparent GIF by a JavaScript function- PNG applied through the
AlphaImageLoaderfilter by a JavaScript function
The images here are the same PNG repeated, and the file size is small (3kB), so the effect is difficult to see. A better assessment can be made on a page that loads more slowly.
This page shows two similar 24-bit PNG images. In both cases, the SRC of the IMG element is swapped with a transparent GIF, and the PNG is then applied to the element through the AlphaImageLoader filter by a JavaScript function called OnLoad. The difference between the two images is that the first is rendered transparent by the application of the Alpha filter to the IMG element in an embedded style sheet.
As the page loads, the first image is not displayed, whereas the second is displayed with the grey background. When the page has completed loading, JavaScript swaps the images. There is a slight flicker in the first image as the grey background is first displayed then removed, but I can live with this.
The page download speed is reduced, to enable the effect to be seen, by the addition of a redundant 150kB image that is not displayed.