PNG images are more often better than GIF when it comes to rendering images with transparency mainly because GIF can only support 256 colors while PNG can support 32-bit colors. Here’s a graphical comparison between the two.
PNG is obviously better! Problem is that Internet Explorer 6 and below doesn’t support PNG images natively and that’s kind of bad for web designers who wish to make use of the power of the PNG image format. Other browsers such as Firefox, Opera and Safari support PNG natively but not IE6 and below. Why? Well you go and ask Microsoft.
Is there a solution? Of course! I won’t try to explain how it works because there are many websites out there explaining how it works. I’ve pretty much based my code on a solution provided by Microsoft which uses the proprietary AlphaImageLoader filter. The problem with their solution is that you have to practically edit all your web pages plus it won’t validate with CSS standards.
After studying the basics, I came up with a simple and valid solution that works. With a little help from a 1×1 transparent GIF and a few lines of javascript, you can properly render PNG images with alpha transparency in Internet Explorer. Here’s what you do.
- Upload this Nifty 1×1 Transparent GIF to your web server. Put it in the same folder as your html file.
- Upload this Nifty Javascript that fixes PNGs in IE to your web server. Put it in the same folder as your html file.
- Paste the following javascript code somewhere inside the <head></head> section of your page.
<!--[if lte IE 6]>
<script language="javascript" src="iepng.js"></script>
<![endif]--> - Refresh the page and enjoy transparent PNGs in Internet Explorer
There you go. Hope this helped.
April 27th, 2008 at 3:49 am
sir, does this work pag kunyari ang png mo nka background ng css?
April 27th, 2008 at 6:23 am
Hi Jorge,
Nope, sadly it does not. I’ll try providing a fix for transparent PNG backgrounds soon.
Mike