PNG is a 5 year old lossless image file format that many people are hoping will become the primary format for graphics on the Internet. It stands for “Portable Network Graphics” and is always pronounced as “ping”.
Currently the majority of web based images are stored in either the JPEG or GIF formats. JPEG’s lossy compression format has proven to be a very effective format for high resolution complex images such as photographs. GIF uses a lossless compression format like PNG and is most effective with uniform images typically produced by computer graphic applications.
So what is special about PNG when compared to GIF and JPEG?
The fact is both JPEG and GIF have significant advantages over PNG. GIF for example supports animation which is not part of the PNG format. JPEG’s lossy compression is capable of producing smaller image sizes than either PNG and GIF and will undoubtedly remain popular for displaying large photographs.
PNG on the other hand, combines many of the advantages of both GIF and JPEG with capabilities not available in either.
GIF only supports a maximum of 8 bit color tables while JPEG is restricted to True Color or Gray Scale images. PNG supports all 3 formats up to a maximum color depth of 64 bits per pixel. This provides greater flexibility to compress an image without sacrificing quality. In fact, a PNG image can be compressed, expanded, edited and recompressed indefinitely without losing any information. At 8 bits, GIF images start out without the ability to store all of the information in a complex image while a JPEG image will progressively lose information each time it is compressed even at the highest quality setting.
The most powerful feature of PNG is its Alpha Channel support. For those of you that are not familiar with an Alpha channel, it is used to store transparency information in an RGBA format. As many of you know, you can assign a transparency value to a GIF image by selecting one if its color tables as a transparency color. This provides 1 bit transparency where a pixel is either visible or invisible. PNG’s alpha channel provides gradient transparency where a pixel can have up to 256 ranges of transparency. This means that a PNG image can be anti-aliased into its background to remove the jagged edges that are apparent when a transparent GIF is displayed. It also means that drop shadows can be blended into any background image.
PNG supports gamma correction. This means that a PNG image can be dynamically color corrected to display correctly on different computer monitors.
GIFs in particular can take on a different color appearance when viewed on a MAC or PC. PNG supports interlacing that is similar to GIF’s line-interlacing but closer in appearance to progressive JPEG. This means that a PNG image can be quickly displayed with a minimum of distortion that improves as the image is progressively displayed.
Finally, PNG is not encumbered by patents, as is GIF. Although it is not apparent to the majority of designers, GIF uses an LZW compression algorithm that is patented by UNISYS. UNYSIS in turn has imposed a license fee and other restrictions on developers using GIF. This is a major hindrance for many software developers that are actively seeking an alternative to GIF. See the article at: http://www.cloanto.com/users/mcb/19950127giflzw.html for more information on this interesting topic.
So where does this leave PNG? Unfortunately with still a way to go. Although PNG is officially sanctioned by the W3C and preferred by the majority of graphic application developers, it still has several hurdles to overcome. The primary hurdle is its lack of full support in several Browsers. IE5 and NN5 will implement many of PNG’s capabilities. Several older browsers however, have either limited or incompatible support. Web designers will consequently have to design only for the most recent browsers or will have to provide alternatives for visitors with older browsers.
Another limitation is its lack of support for animated images. Animated GIFs have become very popular on many web sites. An extension to the PNG standard called MNG will provide more advanced animation than GIF but it will be some time before it is fully available. Until it is, PNG will not be able to fully replace GIF.
For more information on the PNG format and its current status, check out these sites:
http://www.libpng.org/pub/png/
http://www.w3.org/Graphics/PNG/
Steve White of http://www.IMSWebTips.com Virtual Mechanics & IMSWebTips offers DHTML tools and information, and also publishes a web tips ezine with lots of great ideas, snippets of code, and HTML and DHTML tutorials for any webmaster, regardless of experience.
