To PNG or Not To PNG

I've recently been either blessed or cursed to work on a number of websites that make use of the PNG file format. They're small, they look great, and they support full transparency with variable opacity. Problem is: Not all browsers support them.

For those not familiar with this type of image, The Portable Network Graphic (PNG) image format was developed in the 1990s by the World Wide Web Consortium in response to Unisys's plans to exercise its intellectual-property rights over the GIF format. The intent was to develop a "better GIF than GIF" that would use alpha channels to give designers and developers true transparency – drop shadows on any background, translucent images, and anti-aliased edges.

While Netscape and Mozilla browsers long displayed PNGs in their full glory, the format hasn't been a runaway success in large part because Internet Explorer doesn't always handle PNG graphics correctly. IE support for PNG transparency – perhaps its greatest advantage over GIF – has been very limited, typically rendering the transparent parts opaque. Javascript work-arounds have been available to let designers and developers "hack" IE, but until the 2006 release of IE 7, Microsoft browsers could not be relied upon to accurately display PNG graphics. At that time, nearly 66% of users browsed using IE 6 or IE 5, neither of which correctly displayed PNG images.

But it's now 2008 and IE 7, the last major browser to support PNG graphics, has been on the market for almost two years. Is it safe at last to use PNG images to cast shadows and smooth edges?

The answer is an enthusiastic, "Sorta."

From January 2006 through November 2007, use of IE6 and IE5 fell from 65.8% of the surfing public to 35.2% while PNG-friendly IE7 rose to a 21% saturation. So clearly IE7 has yet to supplant it antiquated predecessors. That would be the end of the story were it not for the parallel rise of Firefox over the same time period from a 25% share to a 36.3% share of the surfing public. Indeed, as of this writing, Firefox is the most popular single browser in use online, beating out IE6 by 2.7%. (source: w3schools.com)

The result of all this jockeying of browsers is that, as of November of 2007, PNG-friendly browsers (Firefox, IE7, Mozilla, Safari, and Opera) have collectively supplanted unfriendly browsers (IE6 and IE5) by 57% to 35%.


So much like our previous findings about the trend away fro 800x600 as the default page dimension, we find that a conditional answer must suffice (if not satisfy). The answer depends on the intended audience and the designer's concern for the shrinking population of incompatable users.

For our part, we're embracing the PNG format for some projects and not others. For projects targeting tech-savvy customers – those most likely to either use a Mozilla-based browser or to have upgraded their own work machine to IE7 – we're diving in with PNG and never looking back. For more mass-market projects were either avoiding PNGs or hacking our way around them. Either way, widespread support for the PNG file format is here, it is growing, and it gives designers greater flexibility – all conditions that will no doubt encourage the format's utility online. FB