PNG transformer - Using PNG

On amix.dk I use the PNG format for some parts of the site. PNG format gives ability for images to be transparent and anti-aliased. In this little article I will describe my experience and the way I hacked support for IE. To get you started you can check out those sites that describe the way to hack support for Internet Explorer (IE):

• PNG Behavior
  (WebFX)
• PNG Behavior demo

Where do you use it?

On amix.dk I have some parts where PNG images are essential:

• If you look at the icons before Posted: and Category: you will see that they are transparent and anti-aliased.
• If you look at my schedule you will see some nice rounded table
  cells.

My experience with PNG Behavior

When I first started I had used the "PNG Behavior" hack by WebFX and it had some problems:

• I had to set height and width for every PNG picture, if one forgets this then the images are not shown in IE!
• On my schedule page I had used PNG in table cells, and "PNG Behavior" does not support this.

The fix - PNG transformer

My little PNG transformer
script adds following features:

• One does not have to set height and width of the pictures.
• One can use the script for table cells (td and th)

Following features are removed from "PNG Behavior":

• I have removed the support for changing the src of the image to another src (if you do this, then the PNG hack is removed...)
• Removed IE version checking.

I had removed those things since I don't use them. They also slow execution of the
script.

How to use it?

Download pngtransformer.zip. In it you will find a demo that shows how to use the script.

Last remarks

Use the PNG format only for pictures that really need to be anti-aliased. More PNG pictures = Slower rendering time in IE.