Transparent PNGs

The Portable Network Graphics (PNG) format is a great way to display graphics on the web. It is meant to be a one-for-one replacement for the Graphics Interchange Format (GIF) but without all the proprietary craziness (for awhile there, UNISYS owned a patent that involved the GIF format). Unfortunately, its adoption has not been as fast or as complete as one would have hoped. The PNG format is lossless and generally compresses images better than GIF. It was designed from the ground up to display images efficiently on the web.

While all modern browsers now support the PNG format, there is still one browser with significant market share that only partly supports it. Anyone willing to take a guess as to which one it is? Of course - Internet Explorer 6. While IE6 can display PNGs, it has trouble displaying PNGs that involve transparency. While there are mostly reliable (jQuery-powered!) script hacks to overcome the issue, sometimes its just better to avoid the issue all together.

When I am theming a site, I'll use PNG format unless the image involves transparency and then I'll just bite the bullet and use GIF. This will be my strategy until IE6 is no longer a factor. I don't feel that it is a big enough of an issue to slow down the page rendering (IE6 users have enough problems) by introducing an additional JavaScript file to overcome the issue.

Sign up to receive email notifications of whenever we publish a new blog post or quicktip!