Benefits of the PNG Image Format

March 29, 2010 Bill Bither

Overview of PNG

The PNG format (pronounced "PING") was designed to replace the antiquated GIF format, and to some extent, the TIFF format. It utilizes lossless compression, meaning no image data is lost when saving or viewing the image. It is a universal format that is recognized by the World Wide Web consortium, and supported by modern web browsers. The PNG format was developed when it was discovered by the entire development community in early 1995 that the GIF image format uses LZW compression, technology which was patented in 1985 by Unisys corporation. The initial developers of the GIF format, Compuserve, was not aware of this at the time of it's development in 1987. Now commercial and non-commercial software developers who's application supports the reading or writing of GIF or LZW TIFF images must pay substantial royalties and fees. In addition web developers who use any non Microsoft application to generate GIF images directly to a web server also have to pay similar royalties and fees. The PNG format does not have any patent restrictions and can be read and written freely by software developers and webmasters alike.

What about GIF?

GIF images can only be saved as an 8-bit colormapped image, which means you are limited to 256 colors. Remember the GIF format was developed back when most PC's only had the capability of 256 colors. PNG can be saved not only as 8 bit, but also 24 bit and higher up to 64 bit! GIF images allow one out of the possible 256 colors to be fully transparent. As we discuss below, PNG has a much higher level of transparency support. Another benefit of PNG over GIF is typically the filesize of a PNG is about 20% smaller then the same GIF image. Finally, as discussed in the PNG overview above, GIF has patent restrictions with it's use.

There is one advantage that GIF has over PNG, and that is animation support. Due to the problems with supporting one image format that can be either static, or animated, the PNG group decided to call the animated version MNG. Unfortunately browser support for MNG is terrible, and at the time of this writing, not practical to use on the web.

What about TIFF?

The TIFF image format has been around for a long time, and will likely be around for quite a while more. The TIFF format was the cross-platform image format by choice until PNG was introduced, and according to some still is. TIFF's are a developer's nightmare. Last I counted there was over 50 different styles of TIFF images. You never know if an application will be able to read a TIFF image or not. One of the more popular TIFF's is the 24-bit LZW compressed version. This has the same patent restrictions as the GIF format does, but until PNG, was the only standard lossless compressed format. The standard 24 Bit PNG functionally is very similar in function to a LZW compressed TIFF. The TIFF format is able to store multiple images in one file. This is commonly used for FAX images. PNG's do not have this capability. The TIFF format remains to be popular, but there are few reasons to use it for photograph archival with the added benefits of PNG.

What about JPEG?

Unlike PNG, JPEG uses a lossy compression routine. Lossy compression means that the image loses quality and information each time it is saved. Because JPEG uses lossy compression, the filesize is almost always smaller then a PNG, especially for photographic images. Care must be taken when working with JPEG images as each time a JPEG is re-saved, more and more compression artifacts are introduced. Since PNG uses lossless compression it's an ideal format ideal for archival purposes, and for editing before saving a final version as a JPEG. JPEG is the most common image format used on the web, and will continue to be. Most photographic images should be saved as JPEG as opposed to PNG for viewing on the web as the filesize will be much smaller.

All About Alpha

The features we have discussed so far are probably enough to convert anyone into a PNG user. However, perhaps the best thing a PNG has to offer is what's called the alpha channel. An alpha channel is one byte of extra data per pixel (or palette entry for 8-bit images) that represents the transparency level of a pixel. A PNG image with alpha is capable of 256 levels of transparency. What does all this mean? For one thing, you can antialias text and images so that sharp curves look good against any background. You can apply a true drop shadow which fades into the background. You can create images that take any shape or form. There are many possibilities with alpha transparency.

Browser Support

The unfortunate thing with alpha in PNG's is that browser support is way behind the times, although slowly catching up. Although both Netscape 4.04+ and Internet Explorer 4.0+ both read PNG images, the windows version of MSIE 5.0 can only read one level of transparency in 8-bit PNG's (the Mac version of MSIE5.0 works perfectly!). At least this allows for direct conversion of GIF's to PNG's. The good news is that the new Mozilla browser (the browser behind Netscape 6.0) fully supports PNG alpha. Microsoft should catch up very soon!

Alpha Examples

The images on the left are the original PNG's, the images in the middle are JPEG's that were created from the original PNG overlayed onto a background, and the images on the right are JPEG's that were created from the original PNG and overlayed onto the same background as the table.

 

original toucan image courtesy of Stefan Schneider Software
original icicle image courtesy of Pieter S. van der Meulen
stefan_full_rgba.png toucan2.png
IceAlpha.png IceAlpha2.png
32-bit PNG image with alpha. The alpha will not work properly with most browsers as you should see the background through the image. Overlayed onto same background as table (notice mismatch in image background and table background). These PNG's have no alpha channel.

 

Other PNG Goodies

Gamma

Another nice feature of PNG images is the ability to adjust gamma based on monitor settings. Normally, the same image viewed on a Macintosh will look much lighter then when viewed on a Windows PC. By storing gamma information in an image, it can always be viewed the way it was originally intended to be viewed, as long as the application reading the PNG takes note of the gamma.

Interlacing

When viewing either large images, or images under a slow connection, it is nice to be able to see an image gradually take form instead of waiting a long time until it suddenly appears. JPEG accomplishes this with a top to bottom progressive display while PNG can use an interlacing scheme. If a PNG is not interlaced it is viewed progressively. PNG interlacing (formally known as Adam 7) begins by only reading a small percentage of all the data and filling in the empty spaces with an interpolated color value. For every time step, more information is rendered, replacing the "in-between" interpolated colors with the real colors until finally all the data is loaded and rendered. The GIF format can also be interlaced, but the quality is not nearly as good, or fast as a PNG as GIF interlacing is only one-dimensional.

Conclusion

It is obvious that PNG has many advantages over the GIF and even TIFF image format. If you're a web designer, start thinking about replacing your GIF images with PNG. There are plenty of tools out there that will do this conversion for you, albeit only some have a license from Unisys (as a warning, you could be liable if you generate GIF images with an unlicensed application). The eventual obsoletion of the GIF format will not only be a benefit to developers and webmasters, but will enhance everyone's web experience, especially with the inclusion of alpha transparency support in many web pages. For more information on the PNG format, be sure to visit the Official PNG Home Page. For information on the legal implications of using GIF images, especially created by unlicensed applications, see the statement from the patent holders, Unisys.

About the Author

Bill Bither

Bill Bither founded Atalasoft in 2002 and is currently the Co-Founder and CEO of MachineMetrics.

Follow on Twitter More Content by Bill Bither
Previous Article
Building Pure Managed DotImage
Building Pure Managed DotImage

We recently released DotImage 10 and if you’ve been following us for a...

Next Article
DotPdf: Making your own shapes

Posted by Steve Hawley January 23, 2012 Comments ...

Try any of our Imaging SDKs free for 30 days with Full Support

Download Now