The Problem with .PNG

What do you think of when you read or hear the term “transparency” in a web related conversations?

.png might be some peoples answer. “UGH!”, could be a common answer also. If you go to my website you’ll notice some ink splatter headers that sit throughout the design. I had quite a hard time getting those to display correctly thanks to Internet Explorers lack of native png transparency support. It is one of THE most complained about topics on the web (and I have done my fair share of it). People have been asking for the support since BEFORE version 5.0 but today, there are still a lot of hacks and “fixes”, it shouldn’t be that hard to use transparency.

Here’s an example of a browser that supports png transparency, and IEs lack of it.

no png support
 png support

Market Share - The reason it is such a hugely discussed topic is because IE has over 75% of the browser market share. (between versions 6 and 7) Check it out:

browser market share

That is a huge amount! It would probably be safe to say that everyone who owns a PC and is not working in the web industry is using Internet Explorer to browse websites. With the exception of those handful of people related to somebody that works in this industry, hah!

The workarounds for fixing the transparency problem

These are some, but not all of the workarounds, new ways are being created frequently but these are the ones we will explain below.

Twin Helix iepngfix.htc

I ran into this fix for png transparency when I was developing my site. It is probably one of the easiest fixes out there to get working. All you need is a blank .gif image and to initiate the script via your stylesheet:

Example - initiating iepngfix.htc script


img{
	behavior: url(iepngfix.htc);
}
/* or you can target specific elements and their backgrounds /*

#header{
	width: 800px;
	height: 200px;
	background: url(path/to/image.png);
	behavior: url(iepngfix.htc);
}

Of course this is considered a “hack” and it has some limitations to it

  • For 100% dependability, your elements should not have any auto-widths or heights.
  • Sometimes you’ll get flickering. It’ll display the broken png for a second before the script kicks in.
  • Can’t be used on repeating background images.

For more on this method you can go to TwinHelix.com or straight to his demo page

Jquery .ifixpng

Ahh, jquery. I find jquery as one of (if not THE) best javascript library out there. I found this fix while working on some admin panels for Buffini & Company. With the jquery.ifixpng plugin you can replace all the images on the page or you can target certain elements on the page. For this fix you will need a blank or one pixel gif, Jquery and of course the ifixpng plugin

Example - applying filters to .png for correct ie6 display


$(document).ready(function() {
	// apply to all images
	$(’img[@src$=.png]’).ifixpng(); 

	// apply to target elements
	$(’img[@src$=.png], div#header’).ifixpng();
});

This fix also has its limitations

  • Always defaults to “background-position:top left” and you cannot reposition it.
  • Also doesn’t work on repeated backgrounds

for more on this method checkout the demo page

AlphaImageLoader

If you’re feeling lazy, or don’t want to use any scripts to add the filter you can do it manually. Be wary if you decide to use it on repeating backgrounds, it will make any text un-selectable and any links un-clickable in the target element.

Example - applying AlphaImageLoader


#header{
	width: 800px;
	height: 200px;
	background: url(path/to/image.png);
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=
	path/to/image.png',sizingMethod='crop');
}

You can read up on all the parameters of the filter on the Microsoft site.

Moving Forward with PNGs

There are some beautiful sites on the web right now using transparent elements in their design and you should check them out for some great inspiration.

The fixes mentioned above aren’t as good as native transparency support, but they work and that’s what counts. If you have other methods or would like to mention a good site using transparency please comment below and share with us.