Introducing jQuery superpng plug-in

The superpng plug-in has been written to provide a flexible png alpha api to developers using jQuery and who need to support IE6. Other scripts didn’t provide the performance, features or flexibility that I required, as well as not using functionality available in jQuery which is fairy ubiquitous these days. The script uses either the AlphaImageLoader filter or the vml approach, depending on the type of tag and whether background-position is required.

For more information on alpha pngs and IE6, please see my previous post here.


Enable alpha images for all elements with a class of .png providing the relative path of the replacement transparent gif image:

$(document).ready(function() {
	$('.png').superpng({path: '../images/blank.gif'});

The full list of options are as follows:

  • path: define the location of the transparent .gif file used to replace the original png image
  • mode: filter/vml/auto (default) – describes the method used to enable png alpha.
    • filter:  The alpha loader fix is used, replacing the existing image with the blank image found in path.
    • vml: vml markup is placed inside the container. Requires a <div> or other block element.
    • auto:  A mode is chosen based on the tag type and background-position value.
  • cache: Determines if background images are cached. Default true.

Superpng is licenced under the the MIT, BSD, and GPL Licenses. Online examples are available here and the code is available on Github.

Please contact me with any feedback or any issues you may encounter.

Introducing jQuery superpng plug-in

Transparent .png images in IE6

A lot of web design I’m involved with these days involves either animating images over backgrounds, or creating composite layouts made up of multiple layered images. These techniques require placing images over one another, and blending the images (usually with shadows) together. This approach requires images with something called alpha (partial) transparency. The alpha channel is a separate stream of data that specifies the level of transparency for each pixel in the image. In web browsers this functionality is available as a 24 bit .png, with 8 bits each for alpha, red, green and blue.

Now for the kicker. Alpha transparency isn’t available in IE6, and unfortunately as I write this, corporate customers still dictate that we support Microsoft’s finest browser creation.

As has been documented for some time, certain workarounds exist for displaying transparent images in IE6. Firstly, the original sleight method used the proprietary alpha image loader filter, and then variations to allow for background images and css – such as supersleight and Angus Turnbull’s png fix – appeared as web 2.0 took off and we started to make more handsome and detailed web pages.

A recent discussion with a work collegue highlighted one major flaw with this approach – the alpha image loader does not support background-position – and as every decent front-end developer knows, you can’t sprite images without this bit of handy css. I’ve also recently discovered that according to Stoyan Stefanov at Yahoo!, the alpha image loader is in fact also very bad for performance.

With this issue in mind, I came across a different technique for loading alpha png images in IE6. Drew Diller’s technique loads a VML element into the DOM which can then be styled using a full alpha .png. It also appears to be faster than the alpha image loader – though if the browser doesn’t have access to javascript then the alpha image loader would appear to be the only option.

With IE6 usage down to as little as < 5%, perhaps we don't have to wait much longer to leave these dirty little hacks behind us.

Transparent .png images in IE6