png.js demo

An Internet Explorer PNG workaround by scott | schillmania.com

Summary

png.js attempts to replace GIF images that have a class name of png (ie. <img src="image.gif" alt="" class="png" />) with PNG images where supported; in the case of IE:win32, the necessary filters are applied which enable alpha transparency (a big PNG feature) to work. Disappointing on MS' part that it isn't supported natively, but oh well.

Restrictions

PNG alpha transparency only supported under IE 5.5:win32 and up.
Image width and height must be specified under IE for PNG to work.
PNGs as background images may break under Netscape 6.x.
PNG backgrounds will break under IE:mac. (eg. on a DIV element - known browser bug.)
PNG backgrounds do not tile under IE:win32.
"none.gif" placeholder image required for IE:win32 (due to proprietary filter crap.)

Download

Library and example (this page)

Minimal example

How do I use this on my own pages?

Refer to the Minimal demo page. This uses the basic code required and is what you should reference if you want to use this library with your own work.

Demo

Click below to randomize the PNG backgrounds (showing the alpha transparency on the shadow.)

GIF

PNG^*

this is a GIF that is replaced with a PNG image under supported browsers, and a GIF everywhere else.

* only where supported; displays as GIF otherwise.

PNG (background image)^*

* same restrictions as IMG, but this method breaks on ie:mac.