I personally don't believe that technology and techniques that benefit both the user and the developer should be shunned just because the lion-share of users are still relying on older technology. PNG gives far better quality images, usually at a greatly reduced file size. It seems like a no-brainer. Except for the fact that IE6 doesn't support transparency in PNGs.

There is an IE6 PNG fix on TwinHelix that I can only get to do half the job, which is really irritating. The technique makes the image render with transparency, but makes it expand to a somtimes arbitrary size with the dreaded red cross in the corner. Another problem with this is that it doesn't allow you do position the image. I'm currently using a relatively verbose alternative, which essentially involves you emulating an img tag, but allows you to position your element. Hopefully some will find this helpful as I was racking my brains for something like this on my last project.

<div class="image" id="imagename"> <span>Your alt tag</span> </div>

And the css:

#imagename { background: url(path/to/image); position: absolute; top: 0; left: 0; }

imagename .src span {

display: none; visibility: hidden; }

Then in your IE6 stylesheet, add #imagename to your behaviours list:

#imagename { behaviour: url(path/to/iepngfix.htc); }

This obviously allows for things like absolute positioning of transparent images, but also provides a nice fallback in the case of CSS being disabled. The only things is doesn't cater for are image repeating (as it's an intended replacement for img tags, this isn't really a requirement, but just to be clear) and images being disabled but not CSS - your user won't see anything in this instance.

This has allowed me to fully integrate PNGs into my projects without any worry about compatibility with IE6. As I've said before, I don't mind a bit more leg work if it allows me to improve user experience.