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 derekvreeland.com 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 simplyprofound.com

 

Kit

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

dave

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: http://www.twinhelix.com/css/iepngfix/

I’ve tried out that solution this morning on http://www.derekvreeland.com 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