Notes on PNG Usage
A few notes after reading this fix about PNG http://24ways.org/2007/supersleight-transparent-png-in-ie6
Colour Shifts
If there is is a colour shift it could be down to metadata in the png - search google for this.
Even after removing metadata I found in one instance that ie7 (at least) had a darker shadow. I think this was to do with how it was positioned though, as if it applied the opacity to the png and then moved the element so it got it a bit wrong. I overcame it be changing the way I positioned the element. Could always send IE something different if needed.
Non Clickable Links
There is a potential problem with links that are inside a container that has this filter. These links can not be clicked on.
The script on 24 ways has a way to turn position relative on for the links. However I found this didn't work for the case I set up and it broke other things.
A VERY good explanation is here: http://www.satzansatz.de/cssd/tmp/alphatransparency.html
The Problem appears to be when there is some kind of positioning on the same element as the filter. There are 3 fixes
1: Thee filter only draws its container over the actual png so you could just make sure the link was never covered. (You can't set a positioning or repeat to a filter though so not that great. Having said that it seems as though the problem links are OK as long as they are under a transparent part of the png so this could be used for positioning. (eg use the transparent part to move it away)
2: Similar to above, try to add to an element that doesn't contain links
3: Or you could set the positioning on an element under the filter, then use the another container to set the filter. The article says to add a position relative and a z-index to the link but in my case I didn't need it (I was using a navigation that already had lots of has-layout stuff going on)
Size
A PNG 24 with transparency creates quite a large file. The quality is better than a Jpg but is much larger for situation that would usually require one. I have found though that large areas of transparency don't create too big a file size. This is useful to know if you are going to use technique number 2 (see above) it won't create that big a file size.
Fireworks
If you use the "alpha transparency" option in Fireworks with a PNG 8 you can keep the semi transparent areas in modern browsers. IE 6 ignores this but keeps the index transparency. This could be useful when IE6 becomes less important but you still want to show the images. Might help with file sizes too.
In conclusion
PNG's are worth exploring and seem safe to use and could be very useful for absolutely positioned elements when there is no control over their edges.
The filter works for IE 5.5 and IE 6 but not 5.0. It also works for inline pngs but this means that an inline image might be removed for IE 5 completely. It might be best to just serve it to just these 2 browsers and let IE5 do its own thing unless an alternative image is shown.
There are a few more points to find out about before I can trust using them in a CMS:
For inline pngs, how do they react if floated or if elements are floated around them?
How do they react to SIFR?
Do they still work OK if they are inside links?
Do the ALT Tags work OK?
Examples to follow!!