Home »

PNG Transparency for Internet Explorer (IE6 and Beyond)

Saturday, November 3, 2007
Like GIFs and JPEGs, PNG images are ideal for web use. Like GIFs, the PNG is great for displaying small images with few colors, like logos and icons. Also, PNGs sport a few advantages over GIF images. Most notably, they support alpha transparency.

What is alpha-transparency? GIF files are only capable of displaying a pixel as either completely transparent or completely opaque: this is known as binary transparency. When an image contains alpha layers, however, parts of an image can be partially transparent. You can specify a level of transparency from 0 to 255. Below is an image with layers of varying transparency:

PNGs thus have the potential for creating some interesting effects on a web page, like translucent background images and drop-shadows. But despite their advantages over GIFS, PNGs aren’t nearly as popular as GIFs web design, primarily because of the impression that PNGs don’t enjoy wide browser support.

This view on PNGs is a bit of a misconception.

While Internet Explorer for Windows 6 (IE6) and previous versions of IE don’t support PNGs’ alpha-transparency feature, all popular browsers can display PNGs.

While IE6- doesn’t explicitly support alpha-transparency out-of-the-box, if you will, there is a workaround that ensures PNG’s cross-browser compatibility.

Microsoft has a plethora of proprietary visual filters and transitions 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:

The key property here is the filter property. While filter is not valid CSS, it does allow you to apply the AlphaImageLoader filter to the image specified in the parentheses. However, since it isn’t standards-compliant, you may wish to apply this property only as needed (i.e., only when the page is being displayed in IE6-).

By combining this method, developers can build rich image-based designs with alpha transparency like they would for modern browsers like Safari, Firefox, and Internet Explorer 7 that all supports PNG alpha alpha transparency natively.

How to Include PNG Transparency in IE6
One available method for doing this is employing Angus Turnbull’s .htc script:
  1. First, download the .htc script at TwinHelix Designs. HTC is a
    scripting language
  2. only usable by Internet Explorer (because it was created by Microsoft) and this specific script contains applies the AlphaImageLoader filter to all images within a web page.
  3. After downloadign the script, upload the script to your Web server.
    Then, create (or download from TwinHelix) a blank gif file. This image file is 1×1 pixel with the color set as transparent. (Back in the 90s, these were called these gems “single pixel GIFs“). 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.
  4. Create a separate CSS file (we’ll name it ie.css), and include within in the following single line, referencing the location of the .htc file:
    img {
    behavior: url(iepngfix.htc);
    }
    The behavior property let’s you attach 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.
  5. But, we 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:

    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 stylesheet loads only if the page is displayed in IE6-, letting you apply the non-compliant CSS only when it’s absolutely necessary.
Tags: , ,

Comments[ 0 ]


Post a Comment