The Care and Feeding of PNG

First Published: WebTechniques
Date Published: 2001
Copyright © 2001 by Kevin Savetz

In 1998, Portable Network Graphics, or PNG, was gaining popularity on the Web, but keeping a low profile. At that time, it was supported by more than three dozen graphic development programs and served by approximately 2800 Web sites.

Today, PNG has moved closer to becoming a mainstream graphics format. It's supported by hundreds of graphics programs and all of the major Web browsers, and is used on more than half a million Web pages, according to AltaVista. PNG is more popular than ever. However, it still isn't a household word, even among people who work with Web graphics on a daily basis.

PNG vs. GIF and JPEG

PNG isn't a panacea for all graphics format woes, but it does offer distinct advantages compared to the Web's two mainstay graphics formats, GIF and JPEG--especially GIF. From technical and legal standpoints, PNG is superior to GIF. However, PNG won't replace JPEG. For photographic images that can tolerate loss, JPEG usually produces smaller, more easily transferrable flies.

PNG produces "lossless" images--that is, images that don't lose any quality in compression. JPEG, on the other hand, is "lossy"--it throws away some image information, reducing image quality and file size. PNG supports millions of colors, transparency, and interlacing. It also has better compression than GIF. But perhaps its best quality is that PNG is an open standard.

PNG has gained popularity because of its technical advantages and freedom from pesky litigation. Unisys owns the patent to the LZW compression system used in the GIF file format, and over the years it has bullied graphics-program developers, online service providers, and even individual Web sites into paying royalties for using GIFs. (This issue will become moot in 2003 when Unisys' patent expires.) In 1999, Unisys' tactics instigated the "Burn All GIFs" movement, which implores Web designers to replace GIF images with PNG images.

With an active development community, PNG is a living file format that's continually evolving. In January, PNG gave birth to version 1.0 of MNG, an extension to PNG that provides for animated graphics.

Greg Roelofs, a member of the PNG development group and author of PNG: The Definitive Guide, thinks that most Web designers know of PNG and use software that's capable of creating PNGs. However, "most still believe, rightly or wrongly, that too many people's browsers are incapable of viewing PNGs; and most seem to believe (wrongly) that Photoshop is the final word on PNG capabilities," he says.

Browser Support

According to Roelofs, it's a popular misconception that few browsers support PNG. In fact, Microsoft Internet Explorer, Netscape Communicator, and Opera have supported it since 1997.

A major stumbling block that prevents some Web developers from using PNG is Internet Explorer's poor support for PNG's transparency feature. "The PNG feature that is outstandingly better than either GIF or JPEG is transparency," Roelofs says. "But until Microsoft gets off its collective thumbs and releases a Windows browser that actually supports PNG transparency in all its glory-as Netscape has done, as Microsoft's own Macintosh and WebTV teams have done, and as developers worldwide have been begging them to do for years-how can site designers possibly use that feature?"

Although version 4.x browsers all support PNG--if not perfectly--not everyone uses those browsers. Roelofs comments that he "can't really blame site designers too much for not wanting to rock the boat" by using a graphics format that can't be seen by the 2 or 3 percent of users with pre-4.0 browsers, "for so little return."

"I suspect that most sites' visitors are at least up to the 4.x browsers, which means you could safely use opaque PNGs," Roelofs says. "But that doesn't gain you much over GIF or JPEG. [It gives you] 2D interlacing versus GIF's 1D (not a huge draw), the slightly better compression than GIF (also not a huge draw), and the relatively rare case of a smooth gradient with many more than 256 colors (which PNG would compress quite well, and which would look noticeably better than a JPEG or GIF)."

One area where using PNG makes good sense is with dynamic image generation, for example, with site statistics and weather maps. This is "where Unisys wants truly vast quantities of cash in exchange for a license to use LZW-encumbered GIFs," Roelofs concludes. "Even losing 5 percent of your customers wouldn't cost you as much as the Unisys licensing fees would: The amount reported for one weather site was in the millions of dollars."

GIF and JPEG formats are so entrenched that many users, even professional graphic designers, remain in the dark about PNG. Mark Simonson, a freelance Web designer, notes "[PNG is] the native format used for Fireworks documents. However, my use of PNG is rather incidental, as anything I create in Fireworks is always exported in some other format, usually GIF or JPEG. I don't think I've used PNG outside Fireworks, and I really don't know a lot about the format."

Many site developers simply aren't sure when to use PNGs. They should be taught that they are useful when a PNG file will be smaller or look better than its JPEG or GIF counterpart. According to Roelofs, common misconceptions about PNG include:

PNG compresses better than JPEG. "In general, JPEG compresses much better, because it throws away information. PNG is completely lossless."

PNG compresses worse than JPEG. "People who see JPEG's performance on photographic images often go overboard with it. For text and cartoon-like graphics with few colors and sharp edges, JPEG is terrible, and it's often much bigger than either PNG or GIF. If you have a two-color (1-bit) image, it's going to expand to either 8 bits or 24 bits before JPEG compression can be applied. You're not going to recover from that expansion without massive quality loss."

PNG compresses worse than GIF. "This is almost never true if the PNG image is compressed properly. Sadly, unwary users often do the wrong thing when testing and never realize it."

Roelofs adds that the most common errors in saving and compressing PNGs are:

Using standard Photoshop tools. "Photoshop doesn't compress PNGs well, so always use a lossless optimizer like pngcrush afterward."

Using Fireworks' Save function instead of its Export function. "The former retains the layering, object, and undo/redo information, which can result in a file that's larger than the uncompressed RGB data."

Starting with a 24-bit image, saving it as a GIF (8-bit, lossy) and a PNG (24-bit, lossless). "To do the comparison right, apples and apples, either use the PNG-8 save option (If such exists) or read the GIF back in and save that as a PNG."

Is PNG advocacy an uphill battle? "Fighting Microsoft is certainly an uphill battle," Roelofs reports. "Although outside of its browser division, it has generally done a superb job of supporting PNG--for example, in Office and even in the OS itself, to some extent."

"Aside from IE, the advocacy battle seems to be winding down," he adds. "There's a solid community of helpful folks on Usenet who provide useful and mostly accurate info to newbies. The hard core geek community has adopted PNG wholeheartedly, and most software that has anything to do with images now supports PNG. I don't think there's any question that the worst is over."

Articles by Kevin Savetz