While Internet Explorer for Windows 6 (IE6) and previous versions of IE don’t support PNGs’ alphatransparency
feature, all popular browsers — Safari, Opera, Firefox, and even the successor to IE6,
Internet Explorer for Windows 7 (IE7) — can display PNGs.
Image Filter Workaround for Using PNGs with IE6
Microsoft has a plethora of proprietary visual filters and transitions (see http://msdn2.microsoft.com/
en-us/library/ms532847.aspx) that are available to IE4+. These filters are designed to apply various
multimedia affects (transition wipes, light effects, and so on) to images in a Web page that are viewed
with IE. One of these image filters — AlphaImageLoader — lets you display a PNG with alpha-transparency
in IE6.
You can employ this filter within the HTML of your page by creating a div element and embedding into
it a bit of CSS:
<div style=”position:relative; height: 188px; width: 188px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src=’images/image.png’,sizingMethod=’scale’);”></div>
The key property here is the filter property. While filter is not valid CSS property, it does allow you
to apply the AlphaImageLoader filter to the image specified in the parentheses. However, because code
isn’t standards-compliant, you may want to apply this property only as needed (that is, only when the
page is being displayed in IE6).
Using this method, developers can build rich image-based designs with alpha-transparency as they
would for modern browsers such as Safari, Firefox, and Internet Explorer 7, which all support PNG
alpha-transparency natively.
HTC Script Workaround for Using PNGs with IE6
Another available method for using PNGs with IE6 employs Angus Turnbull’s .htc script.
First, download the .htc script at TwinHelix Designs (www.twinhelix.com). HTC is a scripting language
only usable by Internet Explorer (because it was created by Microsoft), and this specific script contains (as
well as) applies the AlphaImageLoader filter to all images within a Web page. It can run on both Microsoft’s
IIS (Internet Information Services) Web server, as well as Open Source–based Apache.
After downloading the script, upload the script to your Web server.
Next, create a blank GIF file. This image file is 1 × 1 pixel with the color set as transparent. (Back in the
‘90s, these gems were called “single-pixel GIFs.“) You may want to also download this image from
www.twinhelix.com/css/iepngfix.
Within the .htc script, change the line that references the blank.gif file so that it points to the GIF’s
location on the server.
Create a separate CSS file (named ie.css), and include within it the following single line, referencing
the location of the .htc file:
img {
behavior: url(iepngfix.htc);
}
The behavior property attaches a script to some selector (in this case, all img elements). So, this CSS file
attaches the .htc file to all of your images, thus applying the desired filter effect to every image within
a Web page.
But, you only want to load this CSS file when the page is viewed in IE6. To do this, just add the following
conditional comment to your page’s header:
<!--[if lte IE 6]>
<link rel=”stylesheet” type=”text/css” media=”screen”
href=”ie.css” />
<![endif]-->
Conditional comments like these are understood by IE. What the comment says is, “if the browser is IE6
or below, then read the lines within the comment tags. Otherwise, ignore them.” Conditional comments
provide a convenient way of applying IE-specific HTML or CSS. Here, the ie.css style sheet loads only if
the page is displayed in IE6, letting you apply the noncompliant CSS only when it’s absolutely necessary.
Common techniques for presenting inline images may not work:
1) When placing images in the background of elements, normal behavior is for the image to tile
out. With the solution, the PNG image doesn’t because the filter property was designed to
have this effect.
2) Don’t use this solution in combination with the CSS sprites technique. Make sure that you are
using one image and only one image for the effect.
3) If you’re trying to run multiple versions of IE on one installation of the Windows operating system,
using a method like that discussed at http://tredosoft.com/Multiple_IE, conditional
comments may not work, and the work image may appear on your local system. However, the
solution could be working okay. Try using a third-party testing solution such as BrowserCam
(http://browsercam.com) to address this problem.
The IE6 script works by basically placing the image from the inline position to the background of an
element.
Color Issues with PNGs
Another issue is with color correction. Ever notice that colors on Mac tend to be lighter than those on a
PC? That’s because the people who built those respective systems made changes that created that situation.
A PNG can contain gamma information that could be used to correct the problem.
The process goes something like this: Your digital authoring software records the gamma information
along with the other data necessary to render the image in the PNG file. Then the PNG is distributed
through the Internet and is displayed on numerous operating systems and browsers. Since the gamma
information is included with the PNG file, the browser or whatever application is rendering the image
displays the PNG with the appropriate color correction.
The problem is that the information is incomplete, and the rendering application can’t recreate your original
color profile in another person’s system and doesn’t have the right settings to display color properly.
(When was the last time you calibrated your computer’s monitor?)
Essentially, the systems are guessing at the best way to present the PNG image when the gamma information
is contained in the images, and this attempt at trying to fix the problem actually makes the problem
more severe.
This is, of course, a simplification of what happens. For more information on the problem, see
http://hsivonen.iki.fi/png-gamma.
The best approach is to get rid of the gamma information stored in PNGs. How do you do this? If you
already use Photoshop’s Save for Web feature, the PNG setting leaves out the gamma information.
However, if you don’t own this software and use a Mac, try Gammaslamma (see www.plasticated.com/
GammaSlamma-1.1.dmg) from Shealan Forshaw to download the .dmg file.
