Using Transparent PNG Images

Browser support for PNG is completely acceptable now in my opinion, and I use it quite a bit on some heavy graphics in the site that require it.

This looks great in every browser I tested with the exception of IE6. IE6 still displays the PNG, but without the transparency. While this isn't ideal, it's acceptable as it's not broken and I benefit from the nice effect everywhere else.

Help those poor people still using IE6 by giving them a reason to update already.

I use transparent PNGs on this site for the book cover photos, the photos of Derek, and the background tiles of the text boxes. Without the use of transparent PNGs here I would have likely needed to develop this site in Flash.

Read the Derek Vreeland case study here.


From Comments on



Also note that you can preserve the transparency of PNGs in IE6 using some javascript “magic”. Search for “pngfix” in google for a plethora of examples. The only caveat for some scenarios is that it doesn’t support background images or some CSS conventions, but it’s a good solution for some clients who are still using IE6.

Btw, good flurry of recent posts.

Kit | .(JavaScript must be enabled to view this email address)

September 30. 2008 04:53


Great point Kit, thanks. I’ve seen that around also.

It looks there are a variety of flavors for that. Here’s one for additional reference:

I’ve tried out that solution this morning on and it works well on regular images as well as background images. I noticed that if the page loads slowly I can see the background present for a second before the transparency takes effect.

Awesome, thanks again Kit.

dave | .(JavaScript must be enabled to view this email address)


Categories: GeneralPermalink