Things that go PNG on the Web

Toby Howard

This article first appeared in Personal Computer World, May 1997. 

THE WORLD IS BURSTING with file formats for storing pictures. GIF, JPEG, BMP, PICT and TIFF are probably familiar, are there are scores more. Do we really need another one? According to the World Wide Web Consortium and an increasing number of companies, we do. Proponents of the new image format PNG (pronounced "ping") say it will revolutionize the Web by providing high-quality graphics for the first time. 

PNG stands for "Portable Network Graphics", or, depending on your sense of humour, for the recursive phrase "PNG's Not GIF". PNG is elegant, powerful, extensible and, as its authors modestly say, "cool". It provides lossless compression, handles indexed and truecolour images, supports image gamma data, file streamability and very fast progressive display, sophisticated file integrity checks, and full transparency. There's also a publically available implementor's library. Best of all, it's free. 

Currently, almost all images on the Web are stored as JPEGs or GIFs. The two formats work quite differently, and are intended for two very different kinds of image. JPEG (Joint Photographic Experts Group) is specifically designed for images which contain a very large number of colours, such as scanned photographs. JPEG stores the colour of every pixel, using a "lossy" compression method, which means that whenever you save an image, you lose information. The size of the resultant JPEG file is quite small, but the data it contains is always only an approximation, albeit a very good one, to the original image. JPEG is an official International Standard. It's free, it works well, and looks to have a rosy future. 

GIF (Graphics Interchange Format) stores images using an "indexed" encoding, where each pixel is represented by an integer index into a palette of colours. The size of the palette is limited to 256 colours, which makes GIFs suitable for images which do not contain many fine gradations of colour, such as logos, icons and simple graphics. GIF uses a lossless compression technique that can result in very small files. But there's a catch. 

CompuServe invented GIF in 1987, specifically for online storage and delivery of images. It uses a compression technique known as LZW, after its inventors Abraham Limpel, Jakob Ziv and Terry Welch. LZW is an excellent lossless compression method, and with suitable images (those which contain blocks of continuous colour) can result in savings of up to 40% in file size. 

Now for the catch. It turns out that LZW was patented by Unisys in 1985, which gives them right to charge a royalty on anyone writing or reading files that involve LZW compression and decompression. Since 1990, Unisys has reached licensing agreements with hundreds of companies, including CompuServe, whose software creates and reads GIF files. This means that GIF is not a freely usable format, and to many Web developers, this goes against the grain. 

Together with some known technical shortcomings of GIF, the legal problems prompted twenty graphics experts from ten countries to get together (virtually, of course) to form the PNG Development Group in 1995. Headed by US researcher Thomas Boutell, and with the support of CompuServe and other companies, their mission was to rethink the implementation of graphics for the Web, and design a new format which would be free and future-proof. In late 1996, PNG was formally endorsed as a standard by W3C, the official Web standards organisation headed by Tim Berners-Lee. It's now starting to catch on. 

PNG is designed to replace GIF directly, and supports an equivalent 256-colour indexed image storage scheme. In addition, it supports 8-bit greyscale images, and "truecolour" images of up to 48 bits per pixel. With truecolour images, pixel values are not stored as indexes into a small palette. Rather, like in JPEG, the red, green and blue components of each pixel are stored directly, allowing images with many millions of colours. 

PNG was designed with high-quality graphics in mind. Today, Web images generally look different when viewed on different computers. A GIF which looks good when created on a Mac, for example, will often look too dark when displayed on a PC. This is due to the non-linear display characteristics of monitors, known as their "gamma". PNG partially solves the problem by storing the gamma value of the monitor on which the image was orginally created. PNG viewing software, knowing the gamma of the display on which it is running, can compensate for any differences by adjusting the brightness of the pixels in the image. The results are very good, but for applications where truly exact platform-independent colour matching is important, such as on-line catalogues, product logos, fine art and medical imaging, PNG can also support images stored as device-independent colours, and includes the calibration data required by sophisticated colour managment systems. 

Another requirement for high-quality graphics is transparency. GIF provides this by allowing the image creator to define one colour (usually the background colour) to be transparent. But this is a crude method, and often leads to ugly halo effects, especially with anti-aliased images. PNG supports full "alpha channel" transparency, where each pixel can be assigned a transparency in the range 0 - 255, from "fully transparent" to "fully opaque". This enables partially transparent images to be seamlessly overlaid onto any browser background. 

Due to a superior compression technique, a PNG file is on average about 20-30% smaller than the corresponding GIF. Not surprisingly, the PNG Development Group has put a lot of effort into ensuring that their compression method is legally unencumbered. 

Like GIF, PNG also supports progressive display, giving a low-resolution preview image after only 1/64th of the image data has downloaded (as opposed to 1/8th with GIF). PNG's preview, known as "Adam7" after its author Adam Costello, is ususual: the image fades into view in seven stages as a rectangle whose definition gradually improves. The initial image is rather like the enlarged pixels that sometimes cover alleged criminals' faces in TV news reports. One reason for the choice of this method is to accommodate imagemaps, where it is often obvious where to click even when presented with a low-resolution image. 

PNG also has a few other interesting features, including a clever scheme for checking common types of file corruption, the facility to apply built-in filters to the image to improve compression, and the storage of text with images to make them more readily indexable by Web search tools. 

Here's a quick comparison between the features of PNG and GIF: 

So, now that you are hopefully convinced that PNG is "cool", if not "gnarly", where can you get PNG images, and how can you view and edit them on your machine? The best starting place is www.wco.com/~png/, which has lots of links to on-line documentation, to software which supports PNG (such as PhotoShop, Paint Shop Pro and Corel Draw) and to the free C source code for the PNG "reference implementation". 

What about Web browsers? As I write (early 1997), neither Netscape nor Internet Explorer currently support in-line PNG images, although plug-ins are available. But both companies have stated their intention to implement PNG fully, so we should expect the two biggies to play ball very soon. In fact, Microsoft liked PNG so much they chose it for encoding all the graphics in their Office 97 suite. Here's a PNG image: what does your browser display?

If you didn't see the image, you might like to look for a suitable plug-in for your browser. Check out Greg Roelofs' browsers and plug-ins page.

(Or, update your browser: Netscape 4.6 and Explorer 4.0 support PNGs. – TH, May 1999.)

You may be relieved to know that there is one thing our old friend GIF can do which the young upstart PNG can't: storing multiple images in the same file -- the animated GIFs we all know and love. But the PNG people are working on this, developing a new multi-image standard called MNG. As for JPEG, they want to improve on that too, and WNG (Wavelet-based Network Graphics) is already on the drawing board. 

The work of the PNG Development Group is leading the way for high-quality graphics for the Web, and it looks like everyone will soon be following. 

Toby Howard teaches at the University of Manchester.