PNG's NOT GIF!
By Greg Roelofs
All of a sudden -- or so it seems -- the PNG image format is news.Besides having one of the most pronounceable acronyms ("ping") in all of graphics, just what is so nifty about PNG and why the sudden interest?
PNG officially stands for Portable Network Graphics. Unofficially, it stands for PNG's Not GIF, and therein lies a tale of lawyers, the Internet, much Net anguish, and a "sudden interest" more than two years in the making.
This article by Greg Roelofs, a member of the PNG Development Group that donated the spec to the W3C, talks about the history of PNG and why it's gaining newfound interest among Web developers.
A Brief History of PNG
PNG's roots can be traced back at least a couple of decades if one is picky about it, but for all practical purposes it started at the end of 1994 when CompuServe announced that GIF-supporting programs would henceforth require licensing fees. This sudden change in status for what everyone had always believed to be a free image format led to a predictable result: several weeks of flames and hand-wringing on Usenet. When the dust settled, it was apparent that the real blame lay at the feet of Unisys, which had patented the LZW compression algorithm in 1985 but somehow failed to notice for seven years that it was used in GIF.
Within days of CompuServe's announcement, something productive was underway on Usenet. Design of a new, improved image format to replace GIF had begun with a
comp.graphics posting by Thomas Boutell on Jan. 4, 1995. The PNG project was a nearly perfect example of Internet cooperation and efficiency. (I say this without a shred of modesty.)The goals for the new image format were threefold:
- To make it portable, not just across platforms and operating systems, but also across implementations (TIFF was repeatedly cited as an example of what not to do);
- To make it network-friendly in the booming era of the World Wide Web; and,
- To create a new graphics format capable of replacing GIF.
The specification was hammered out and feature-frozen in just two months; and no feature was too small for argument. Even the name and acronym -- which, given the goals stated above, might seem obvious in retrospect -- resulted in weeks of discussion. Seen from a vantage two years later, the spec still has very few flaws.
PNG vs. GIF and JPEG
Like GIF -- but unlike JPEG, at least 99 percent of the time -- PNG is a lossless image format: what you put in is exactly what you get out. Unlike GIF, PNG supports:
- Grayscale images up to 16-bits, and true-color up to 48-bits (not just color-mapped [palette] images)
- Up to 65,536 levels of transparency/translucency
- Automatic "brightness" compensation across platforms
- Two-dimensional interlacing, which provides an initial impression of the image after just 1/64 of the data has arrived.
Plus it's free of patents and has better compression.
Not all of PNG's features were designed for the Web, of course. For example, no sane person would put a 2 MB 48-bit true-color image on a page when a 50-Kbyte JPEG would suffice. Support for the lossless encoding of true-color images was provided for applications like image-editing and medical imaging, where any loss of image data is unacceptable.
There are, however, several benefits for Web authors. One is improved image compression; color-mapped PNG images tend to be 10 to 30 percent smaller than GIFs, assuming the PNG encoder is halfway decent. PNG's 2D interlacing scheme is also a nice improvement over GIF's simple line-interlacing, both aesthetically and in terms of apparent performance.
Those are minor issues, though. Perhaps the biggest win is PNG's support for an alpha channel, or mask layer -- in this case, variable transparency. Where GIF pixels are either fully transparent or fully opaque, and JPEG pixels are always opaque, PNG pixels can have as many levels of partial transparency as there are, for example, shades of red. What this really means is that you can create true drop-shadows and anti-aliased fonts, logos, buttons, etc., so they'll look good against any background. No more "ghosting" around the edges of Web graphics!
Alpha information would be of limited use if it were only available in 32-bit or 64-bit RGBA (red/blue/green/alpha -- RGB with an alpha channel) images; PNG's compression is good, but it can't compete with JPEG's lossy method (and lossless true-color images tend to be big). However, even palette images can have what amounts to an alpha channel. While this may sound like a low-quality solution, the results can be quite striking, as in this shadowed image by Stefan Schneider:
If you are using a browser that supports PNG (with or without a plug-in), you can view Stefan's original PNG image (12.5 KB) of the toucans.
The two images are JPEG screen shots of Stefan's toucan, as seen against a plain green and textured yellow background. Stefan's RGBA-palette PNG is 12.5-Kbytes, but the full RGBA image is nearly 28-Kbytes -- more than twice the size.
Finally, here's the same image on top of itself, courtesy of Glenn Randers-Pehrson:
Note how the shadow from the front toucan falls both on the yellow breast of the toucan in the background and also on the pinkish background. The result is a very realistic "colored shadow" effect. Try that with GIF.
Cross-Platform Color Management
Another PNG feature is gamma correction. Although the technical details are fairly complex, the upshot is that PNG provides a way to display images with
the same brightness on any system. If you've ever noticed how Mac images tend to look too dark on PCs and PC images too light (or washed-out) on Macs, you've encountered the problem.
Gamma correction is the solution. A PNG image created to look perfect on a certain system is tagged with the gamma value of that system. When the image is displayed on a different system, the viewing software performs a simple calculation to equalize the gamma values. The result is an image that is virtually indistinguishable from one system to another.
In fact, gamma correction is only the first approximation in displaying images uniformly across systems. The next level is to worry about color variations, which is where chromaticity and white point values come in.
The best solution today is to use a complete color management system (CMS). In conjunction with a standard color space, such as the sRGB (standard RGB color) space proposed by Hewlett-Packard and Microsoft, a CMS can account for differences in the viewing environment (e.g., the ambient light level). PNG supports both chromaticity and white-point corrections as well as the sRGB color space.
But What About Animation?
By now, you probably have noticed that we haven't mentioned any sort of animation or multi-image capability. To explain why, we need to take another look back into PNG's history.
When the PNG specification was created, multi-image GIFs were a curiosity, and animations were outright banned. (They still are, actually.) It was decided for various good reasons that PNG should be a single-image format, with multi-image capability provided in a follow-on specification -- called "Multiple-image Network Graphics" or MNG. In theory, MNG could be as trivial as some simple glue holding together multiple PNG images, but it could also include sprites, multimedia features, and other image formats. Either way, after months of intense specification-design; implemention and testing the PNG format; and polishing the spec for standardization, no one was eager to start working on another one.
Then, in a move that will forever endear them with the lawyers at Unisys, Netscape struck with the Navigator 2.0 betas in October 1995. These betas provided full support for GIF animations, and GIF's popularity took off like the proverbial rocketship animation.
Meanwhile the PNG group was still pretty wiped. Although the next year saw a great deal of activity, work on a multi-image extension didn't really begin until May 1996. In fact, it's just now winding down with Glenn Randers-Pehrson's late-April release of the MNG Draft 40.
Download a copy of the MNG Draft 40.
The Light at the End of the Tunnel
But while progress on the animation format has been a bit sluggish, things are truly beginning to pick up for PNG. After nearly a year of promises, Microsoft released its first Internet Explorer 4.0 beta with native PNG support. (Given that it's a beta, we'll try to overlook the fact that it omits three of the four Web features mentioned above -- there's no progressive display, no gamma correction, and no transparency support yet.)
Netscape has yet to achieve true enlightenment but is moving ahead slowly. Navigator 4.0b3 adds support for alpha-channel processing with plug-ins, and rumors have it that 4.0b4 will finally invoke an appropriate plug-in if an unsupported
<IMG> type is encountered. (Last-minute testing of 4.0b4 indicates that this is not true. Currently, plug-ins only work with
<EMBED> tags and, with version 4.0,
<OBJECT> tags with HEIGHT and WIDTH attributes.)
These enhancements, coupled with Siegel and Gale's newly updated PNG Live 2.0 plug-in, mean that Navigator 4.0 will almost behave as though it has native PNG support (at least for folks using Windows 95/NT). Siegel and Gale are working on Mac and Unix flavors of their plug-in, but those aren't available yet. (The PNG Live 1.0 version of the plug-in is available for PowerMacs, however.) And there's still no word on whether plug-in collisions can be mediated cleanly, allowing you to assign MIME type
image/png to a particular plug-in even though several plug-ins may claim to support it.
What about PNG support for those unwilling to live on the bleeding edge of beta browsers or behind Windows? Although there are half a dozen plug-ins available for various platforms; a fundamental flaw with plug-ins is that they ignore the sole multimedia tag present in classic HTML: <IMG>.
In other words, all the PNG plug-ins in the world won't help you view my PNG interlacing demo -- at least not until Navigator 4.0b4 shows up (I use
<IMG> rather than
<EMBED> to reference the PNGs). The alternative is to use a browser with native PNG support already, such as Amaya, ANT Fresco, Arena, Ariadna, Grail, MacMosaic, Omniweb, Voyager, or any of a dozen others.
So what's the skinny for Web developers? Three words: start gearing up. Assuming Microsoft and Netscape release their respective browsers in the next couple of months, I expect a surge of PNG activity on the Web within half-a-year. PNG may not have the flash of RealAudio, Shockwave or even GIF animations, but we hope that attention to detail has prepared PNG to become a workhorse image format for serious Web developers. Bleeding-edge hackers will undoubtedly find truly twisted uses for PNG in combination with Netscape's new layers support as well.
There are plenty of PNG-supporting tools out there -- including heavyweights like Adobe Photoshop 4.0 -- and more are appearing every week. Not all of them do a great job, but the tools are continually being refined.
Additionally, the PNG group is not only working hard to make the free PNG library and its supporting tools robust and useful, but also to help commercial vendors and content developers debug their wares. Joining the
png-implement mailing list is the best way to get rapid-fire feedback. PNG developers also hang out on Usenet newsgroups such as
Two years may seem like a very long time to those of us who helped create the Portable Network Graphics format -- and in Web-time that's more than a century -- but keep in mind that even GIF and JPEG took at least that long to become truly popular. Other formats, like TIFF and the PBM/PGM/PPM suite (portable bitmap/graymap/pixmap), are arguably still niche players. With PNG already going mainstream in apps like Microsoft Office '97 and Photoshop, and with it poised to take off on the Web, the future is looking very bright indeed. Grab those shades; gamma correction won't help here.