PNG - The 'other' graphics file format

by Joe Gillespie — Oct 1, 1999

During the last month, there has been a lot of discussion on the various Web design lists about the continued use of the GIF file format for Web graphics. At the heart of the GIF format is LZW compression - and this is patented by Unisys, Inc.

Any software developers who include support for the GIF file format in their programs are supposed to pay Unisys a license fee. Most of the big companies do.

Confusion arose when it was reported that Unisys wanted $5000 from Web site owners and developers who used GIF images on their pages - just about everybody, in other words. Fortunately, this is not quite true, it is more of an attempt to flush out unlicensed software developers. But, in the meantime, many Web designers are looking hard at an alternative - PNG.

PNG, or Portable Network Graphics format was developed by a consortium of companies to side-step the LZW patent issue. It uses a different compression algorithm and introduces a number of refinements to the GIF format. The trouble is, that where all browsers support GIF and JPEGs natively, PNG support is not so universal. Many browsers need a plug-in or help from QuickTime.

Here are GIF, JPEG and PNG versions of the same picture. Each picture was saved at approximately the same file size to compare image quality. How do they look to you? If you can't see the third picture, your browser doesn't support PNG. Of all the version 4 browsers, only the Mac version of MsIE doesn't have any internal PNG support. Some WYSIWYG editors don't understand PNG either, the images have to be hand-coded.

kitty.gif kitty.jpg kitty.png

Kitty.gif - 9.8k - It is often said that GIFs shouldn't be used for photos but this image is a 64-color GIF and works very well without any dithering because of the restricted number of colors. Remember, dithering increases file size!

Kitty.jpg - 10.1k - This JPEG is slighly larger in size than the GIF. It was saved at 'Maximum' quality in Photoshop (80%) and as you can see, the background still shows blockiness and compression artifacts and the texture of the fur is not as crisp as either of the other two formats.

Kitty.png - 12.2k - The PNG-8 has the largest file size. It is also saved as 64 colors with no dithering. Saved as a PNG-24, there is little or no difference in quality, but the file size increases to 44k!

Note: These images were all produced in Photoshop 5.5. Other programs and plug-ins will give different results in terms of quality and file size.

There will be a 'head-to-head' comparison of these early in the New Year.

In earlier WPDFD editorials, we have covered the GIF and JPEG formats fairly extensively. What does PNG really have to offer? How does it compare to the other formats? Well, PNG as a graphics format, has been designed to be very versatile. It can store up to 16 bits greyscale and 48 bits of color - that's 16 bits for each of Red ,Green and Blue value per pixel. It also allows a 16 bit alpha channel and can store gamma, transparency and textual information. At the moment, there are no 48 bit video cards that I know of, so the spec is overkill for the foreseeable future.

Like the GIF format, PNG is 'lossless'. Its compression scheme doesn't discard any image information as a JPEG does, but it does support color reduction - personally, I think that anything that throws away colors can't really be called 'lossless' - but anyway ...

The two main flavors of PNGs that you are likely to come across are PNG-8 and PNG-24. These are roughly equivalent to GIF and JPEG in terms of how they are used.

PNG-8 allows reduction of bit-depth to improve file sizes as a GIF does and also supports transparency. There will be little difference in size between a GIF and PNG for most images. For some, PNG will be smaller and for others, GIF will win out. PNG-8 is best used for the same kind of images that you would normally use a GIF for - flat graphics, type and buttons. There is no multi-frame animation in the PNG format just yet.

PNG-24 should only be used for full-tone photographs and illustrations. Because the compression is lossless, you will always get very high image quality but file sizes are likely to be larger than JPEG for any given image. Unlike JPEGs though, PNG-24 supports multi-level transparency. This means that you can fade an image into the page background very smoothly.

Photoshop 5.5 gives a number of optimisation options for PNG files. If you use Save As... .png, from the File menu, you can select Adam7 to give progressive rendering of the image. By using certain filters, the compression rate can be improved. If you use the new Save for Web... option, you can apply bit-depth settings and dithering from a palette and compare optimised versions of your image at different settings.

Macromedia's Fireworks also has good PNG support, in fact PNG is its native file format. Because it can hold a lot of information without degradation and can easily be converted to GIF or JPEG, it makes good sense. Some DTP programs are also including PNG support. There is no inherent CMYK specification in the format, but that could change.

After a slow start, the PNG format is beginning to take off. If you design sites that need to be readable by the maximum number of people, it is probably better that you stick to GIFs and JPEGs for the time being. If you are already into DHTML, Cascading Style Sheets and all the other stuff that is only supported in the latest browsers, then it is usually safe to use PNGs.

Some of the format's possibilities, like the variable gamma facility, are still not implemented in any of the browsers, and subsequently, not in the graphics editors as yet. We can only dream of high , 36 inch, 48 bit plasma monitors for the minute but when they do arrive, PNG will be able to cope.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float