The Mighty PNG

The PNG format has many advantages over the GIF and TIFF image formats for  web designers. If you’ve been using GIF’s rather than PNGs, perhaps this article will be of some help to you.

The gradual phasing out of the GIF format in mainstream development is inevitable, and will ultimately enhance everyone’s web experience, especially with the inclusion of alpha transparency support in web pages. For detailed information on the PNG format, you can visit the Official PNG Home Page.

The PNG format was designed to replace the limited GIF and TIFF formats. It employs maximum integrity in compression (lossless compression), so that no image data is lost when saving or viewing the image. The PNG format does not have any patent restrictions and can be read and written freely by software developers and webmasters alike. GIF images can only be saved as an 8-bit colormapped image, which limits the user to 256 colors. PNGs on the other hand, can be saved not only as 8 bit, but also 24 bit and higher up to 64 bit. GIF images can only use one out of the 256 colors for full transparency, whereas PNGs have a much higher level of transparency support. PNG filesizes typically come out at around 20% smaller than the equivalent GIF image. The GIF format has patent restrictions with it’s use that the PNG doesnt, however the advantage that GIFs have over PNGs is the animation support. Problems with supporting just one image format for both static and animated capability, has lead to two seperate formats; PNG for static, and MNG for the animated version. Browser support for MNG is practically non existent, so it is not used for the web.

The TIFF Format:
The TIFF format was the cross-platform image format of choice until PNG was introduced. TIFF’s are hardly ever used in web development, as there are around 40 different types of TIFF image, and the compatability ratio for applications to read them is ridiculously low. The most popular TIFF is the 24-bit LZW compressed version, which until PNG, was the only standard lossless compressed format (the standard 24 Bit PNG functionally is very similar to a LZW compressed TIFF). The TIFF format is able to store multiple images in a single file such as are commonly used for FAX images, whereas PNG’s do not have this capability.

The JPEG Format:
Unlike PNG, JPEG employs a degrading compression routine (lossy compression). Loss of integrity in the compression happens each time the file is saved, which means that the filesize is almost always smaller then a PNG, especially for photographic images. Each time a JPEG is re-saved, further compression artifacts are introduced, and loss of integrity occurs. Since PNG uses lossless compression, it is a better format for editing images before saving a final version as a JPEG. JPEG is the most common image format used on the web, and photographic images should always be saved as JPEG as opposed to PNG for viewing on the web, as the filesize is considerably smaller.

The Alpha Channel:
One of the best features that a PNG has to offer is the alpha channel, which employs 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 using alpha is capable of 256 levels of transparency. This means that text and images can be antialiased so that sharp curves look good against any background. This means that a true drop shadow can be applied which fades perfectly into the background without loss of integrity. There are many possibilities with alpha transparency, which I will discuss in another post.

Gamma:
Another useful feature employed by the PNG format, is the ability to adjust gamma based on monitor settings. Typically, the same image viewed on a Macintosh will appear lighter than when viewed on a Windows PC. By storing gamma information in an image, the ability to view the original as intended is possible providing that the application reading the PNG takes note of the gamma.

Interlacing:
PNG interlacing starts by reading a small percentage of all the data from a file and filling in the empty spaces with an interpolated color value. For every time step, more information is rendered, replacing the temporary interpolated colors with the actual colors until all of the data is loaded and rendered. The GIF format can also be interlaced, but the quality is not as good, or as fast as a PNG, because GIF interlacing is only one-dimensional.

Tags: drawing, graphic design, graphics, Web Design, web development