PNG Transparency for Internet Explorer (IE6 and Beyond)

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:

PNG with transparent layers

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:


<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, 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
    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. 
  2. After downloadign the script, upload the script to your Web server.
  3. 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: 
    
    <!--[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 stylesheet loads only if the page is displayed in IE6‑, letting you apply the non-compliant CSS only when it’s absolutely necessary. 

While a rather convoluted way to get transparent PNGs working in your web pages (although less convulted than my previous method), it does provide a method that is as standards-compliant as possible, giving you the freedom to include the beauty of semi-transparent layers in your designs.

52 thoughts on “PNG Transparency for Internet Explorer (IE6 and Beyond)

  1. @James: That’s weird. I do own the book–as I do own several books on CSS–but I haven’t looked it at in quite some time. If there are similarities, they are unintentional–but not surprising as this is a common technique.

  2. Still what bothers me about PNGs is the color difference in browsers. Just pull up apple.com in Safari and compare it to Firefox. The tabs are faded looking in Firefox. Ever seen a fix for this?

  3. Thanks for the mention, I’m glad that you’ve found it a handy fix! A few random pointers:

    1) If you have IE6 installed along IE7 in “standalone” mode there are often problems with conditional comments not working. So don’t panic if your PNGs turn opaque if you use CCs, they’ll probably work just fine in vanilla IE6 :). Alternatively, the script ships with a JavaScript-based activation method that dynamically creates a stylesheet rule in IE5.5/6.

    2) Colour differences are due to the gamma value, you can try removing that from the PNGs if you want!

  4. I’ve never had the HTC hack work consistently. The worst is when refreshing a page and I have my images different sizes with each refresh.

  5. Don’t you think it is a bit stupid to fix all IE6’s bugs ? It’s much more work.
    If designers and developers had never tried to correct IE6, maybe people would have start tu use another browser. I mean that it is not our job to fix that software.

    However, it’s nice to have these solutions but personaly I won’t use them.

  6. I’m trying to apply sprites technique to a group of PNG images. The technique consists in background repositioning. However, it doesn’t work because IE6 filter was previously applied and it does not allow repositioning.

    Could you tell me any solution to this trouble? Might I be force to use GIF instead of PNG’s?

    Thank you.

  7. Hello,

    Thank you for this article. I had been on look for PNG related articles and in specific, tranparency-based PNG related articles.

    If anyone has any idea about this please let me know.

  8. The HTC hack works fine, however it breaks on background-position properties (when you’d like to have a hover effect with no flicker)

  9. In order for the PNG fix to work properly, and not have weird stretching images everywhere, all png images must have a height and a width set in the attributes of the tag. I use this all the time and it’s fantastic. Its changed the way I code sites.

  10. A less complex technique is to combine the IE comment with your first idea.
    Just declare your initial images in your main stylesheet. Then, link to another stylesheet with the overriding IE alpha declarations in it.

    
    
    
    

    ie.css has something like below for each image it needs to replace.

    * html body .image{
    background-image:none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
    enabled=true,src=‘images/myimage.png’,sizingMethod=scale);
    }

    I think it’s better to only change what you need to change, not change every image with a bulky include file. And this method validates perfectly since it’s being called in an IE comment.

  11. There are several problems with this as your astute readers have pointed out. I have taken to using conditional comments to add different stylesheets for IE6 to avoid using transparent PNGs in IE6 essentially downgrading the design. This works for other properties as well that don’t work in IE6. As a result, the sites will look different in IE6 versus IE7, Firefox and Safari. For example, using a solid color background instead of a transparent background in IE6 but all other browsers will display the transparent background. If you want the full experience either upgrade or switch browsers.

  12. Not sure if anyone pointed this out or not… This only works fro non-repeated images. if you have a slice of shadow or a small overlay for your background then it will not work in IE 6 even with this solution.
    So far I haven’t been able to find a solution for those of us who want to use them that way.

  13. I customized this snippit i for automated fixing of all background png images:

    function fixElement() {
    if ( /.png(.*)$/.test( element.currentStyle.backgroundImage.toLowerCase() ) ) {
    imgSrc = element.currentStyle.backgroundImage;
    element.style.backgroundImage = “none”;
    element.style.backgroundColor = “transparent”;
    imgSrc = imgSrc.replace(/^url(“/, “”);imgSrc = imgSrc.replace(/”)$/, “”);
    element.style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’ ” +
    imgSrc + “ ‘,sizingMethod=‘scale’)”;
    }
    }

  14. Kevin Says:

    October 30th, 2007 at 6:27 pm 

    A better way to do it would be to tell the person to upgrade to IE7 or better yet, Firefox lol.
    —————————————————————————————–

    Yeah that’s real practical for us who must design websites which will be viewed by audiences often in the 1000’s (Promotional web designers, University Web designers, etc). And when many if not most of your audience are die hard loyalist either IE, can’t update to or are clueless about IE7 or Firefox, your suggestion is not option. 

    At the end of the day the issue for us (namely front end designers) is the user’s needs and that includes cross browser compatability.

  15. Not only is this method unreliable due to the fact that it will randomly display the image at different sizes in IE, but it does not work for css background images — which is where transparent png’s are most useful IMO. 

    And although IE7 does display png’s with transparency — it also doesn’t display png’s correctly for background images. If there are hyperlinks in the div with a png background they become unclickable.

    So basically png’s are useless in IE — you’d be better off using conditional stylesheets and feeding IE gif’s instead. It’s uglier and more time consuming but it is the only reliable method of using png’s that I’ve found.

  16. Thank you Nick,
    So that’s the reason why clicking PNG icons did not allow me to go to the a tag destination. Does anyone know how to convert a PNG image to GIF image smoothing its borders? With normal conversions the images display with an ugly black border around them.

    Thanks from Spain

  17. Good afternoon again,

    My new blog http://cssymas.blogspot.com has just been born. It’s in Spanish by the moment but I’m working on a Javascript technique to make it translatable into English. My first post was dedicated to the pain that a sprites technique can produce if it is not correctly planned. I would be pleased if any of you can give me an opinion about the text (still working on the design).

    Thanks

  18. Removing the gAMA chunk from a PNG is easy as pie. If you are using Photoshop CS3 it already does not include that chunk with a “save for web” command, otherwise someone above mentioned an OSX program for it, and here is a PC program for the same purpose
    In Fireworks there is a way to get a PNG‑8 file (limits the palette to 256 colors, emulating a GIF) to have single color semi transparencies, which will work in everything but IE6, but IE6 degrades to just on/off transparency, read more here
    I have my own method which I like and use all the time. It’s more work, but it works in everything and IE6 (of course not sub IE6 since those browsers don’t even support PNG Alphas). It requires the creating of divs for the purpose of displaying the PNG as a background image, and then layering another div on top of it by rendering it after in the source code, thus retaining all functionality, and this also allows IE6 to render correctly, but mind you, not using “scale”, but using “image” rendering mode for the filter, and setting the div to the width and height of the image you’re rendering.
    Also you can replace hard coded images in IE6 with the correctly loaded Alpha by setting height: 0; and then setting padding-bottom: to the height of the image you’re loading, then running the filter.
    As far as converting a PNG to a GIF smoothing the borders, just open the PNG with the Alpha in Photoshop, then save out as a GIF with a matte and transparency. I will say though typically you’re better off using a PNG8 file vs a GIF, unless the image is very very small, PNG has a better compression engine than GIF, which is really only good for tiny images and animations.
    Bottom line is PNGs are not useless, in any of their varieties. All can be used in a different situations and had to work in all modern browsers using any multitude of methods, my method works for me, everyone else probably has their own method.

  19. Thanks Andrew, I’ll try to save my PNG files in GIF with a matte and transparency as you suggested. By the moment I cannot apply the divs technique because the page has already more than 50 divs mixed up with tables to get to the icon item and my wish is to clean the structure as much as possible. It’s a very complex site designed with portlets and one of my tasks is to clean it up deeply.

    Despite this, why do the people still use IE6? That bothers me.

  20. because ie7 won’t install on windows 2000 or windows 98. Alot of people have a choice. Our office runs on a windows 2000 platform still. The cost vs benefits of upgrading to xp were decided to be negliable.

  21. meep,

    If you cannot upgrade to IE7, your company should use FireFox. It’s free, secure and works fine with W3C standards — Of course at least it is a personal choice. But I just cannot understand some kinds of elections when the free product works better than the other one. I am not a FF fan since I use IE7 and FF all the time. But IE6 is just a bad browser. It renders like in a nightmare, it is very insecure and its interface does not have vital tips that the others do.

  22. I’ve been pulling my hair out over this. I’ve used the filter option many times with PNG images to help IE6, but when it came to having a PNG as a background image, I was stuck. Now that I’ve found this, I had my site working within 2 or so minutes. Bless!!!

  23. @Rebecca

    The issue isn’t about a company using a browser, but of a potential audience. I code for a University, and our analytics tell us that 80% of visitors browse with IE. 40% of those people browse with IE6. This constitutes and significant amount of hits to our PR department, whether I believe it or not.

  24. thank you for this solution
    easy for me fix my webpage with png image
    just copy iepngfix.htc into the web folder
    then add below command with the page header

    img, div { behavior: url(iepngfix.htc) }
    .style1 {
    text-align: center;
    }

  25. Hi all.
    Firstly, i have to confess that I am not a web developer, and I don’t have any special knowledge of web development, though I’m trying…
    Recently I downloaded a wordpress theme which uses png images and has a pngbehavior.htc file. My host seems to have issues with .htc files and cannot read them or treat them right.
    The reason I’m posting here is because I really want to use this template, and I wonder if there is any way to include the .htc file in the .css file, since, it can’t be called externally.
    I would be gratefull if somebody could help me with this,
    Thank you very much!

  26. Mac did shaft competitive browsers circa 1998 and coped a big lawsuit. If anyone finds a way to make FireFox et al NOT fade out PNG images, don’t let Apple know, ’cause sure as HELL they will try and plug your fix.

  27. yes this might be a solution but I think that we have to push Microsoft to move the technology further not to let them (Microsoft) take us back in time with products like IE6 and IE7… I still have hope that microsoft will bring the browser’s css support to another level making our lives (designers and programmers) easier.
    http://www.savethedevelopers.org/

  28. Thanks for for the straightforward “how to”…

    You’ve helped solve my problem much quicker than I expected!

    Cheers
    Tim

  29. Thank you for Post this great Article.
    This methode is the best solution I ever tried.

    It’s work’s like a charm.
    Only God knows how happy I am now…

    Every PNG’s works.. works.. works…

    Say good bye to GIF.
    Welcome PNG…

  30. Thanks for this. This sort of quirkinesses always make me want to rebel and forget about designing for IE – that being the first way that comes into my mind to enforce browser evolution into some sensible direction.

  31. To the person asking about the png colors — you can get a tool from my website, TrentTompkins.com, to strip out the data that screws up the colors. It’s called TweakPNG CL — it add itself to the right click menu for PNG’s, so you can strip it out in literally one second.

  32. I am currently working on a web site now and Instead of using the in-line style tag in the div, I placed the filter script in my css and it works like a charm on IE6 but not Firefox 2.0. The png doesn’t even show up in FF. Is there some element that I am missing?
    .swoops
    {
    position:absolute;
    left:798px;
    top:24px;
    width:198px;
    height:808px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘images/swoops.png’,sizingMethod=‘scale’);
    /*background-image: url(‘../images/swoops.png’);
    background-repeat:no-repeat;*/
    z‑index:999;
    }

  33. To: Don How

    -You have commented out your background image. Your div is working in IE because IE is loading the Microsoft filter. However, Firefox ignores the filter completely. With your background commented out it’s ignored, and FF has no background.

    -Also note; If you uncomment your background, you will have 1 background appear in Firefox. Depending on your div and image size, you may see 2 backgrounds appear in IE, from the background and the filter. You should include something like:
    !background-image: none;
    to stop IE from loading the background-image.

  34. Thanks for the post. I had this same problem on my online portfolio.

    Not sure if anyone else uses this, but another valid way to get around this issue is to define 2 styles in the stylesheet and specify with the !important flag to choose the one that works best for the browser using it.

    E.g.

    background-image:url(‘../images/bg.png’) !important;
    background-image:url(‘../images/bg.gif’);

    Hope it helps.

    Saf

    http://www.ahmedmia.com
    http://www.safwanonline.co.uk

  35. I am clealy seeing some issues with this technique. The png image displayed in this page has different look in IE6 and FF. In IE6 I can clearly see a greyish background, FF looks good. So does this technique creates this issue?

  36. I see the same as Roger; it renders fine in IE7, FF and Safari — but the transparency doesn’t render in IE6. I’ve always gotten around it by just coding so IE 6 and below displays an alternate JPG or GIF.

  37. I’ve been working with horizontal navigation bar which create roll-over effects thru a background image in PNG format. After applying the code below the image did show as mint as expected, however, the supposed no longer pops-up visible anymore. Please help… Thanks in advance!

    * html #flyout li a:hover {background-image:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,src=‘images/hilights.png’,sizingMethod=scale); }

    Ceasar

  38. I have some other problem with PNG I cannot solve. It appears even in IE7.

    I use JavaScript that uses CSS “filter:alpha(opacity=..)” to show/hide elements with PNG images or PNG backgrounds on my website.
    When applying CSS opacity, even IE7 (that sort of supports PNG alpha transaprency) fails to display it correctly — it changes all semi-transparent zones to black.

  39. It looks like as of Februrary 2010 IE6 still accounts for some 20% of the browsers out there. Far too many to be ignored even some three years beyond the date the article above was originally posted. 

    Transparent PNGS are a designers dream. I refuse to give them up or go back to the days or slicing up pictures for horrid table layouts. 

    Grabbed from http://en.wikipedia.org/wiki/Template:Msieshare1

    E market share overview
    According to Net Applications data
    — February 2010[1]
    Browser As % of IE As % of All Browsers
    Internet Explorer 8-
    Compatibility Mode[note 1] 5.89% 3.63%
    Internet Explorer 6[note 1] 34.39% 21.18%
    Internet Explorer 7[note 1] 22.91% 14.11%
    Internet Explorer 8[note 1] 36.70% 22.60%
    Other[note 2] 0.10% 0.06%
    All variants 100% 61.58%

Leave a Reply

Your email address will not be published. Required fields are marked *