PNG versus GIF

In this tip we will explore the two main choices of graphic format that can be used on the Web to represent simple graphics, schemas or logos:

• GIF (stands for Graphics Interchange Format) was developed in the late 1980's and it is still widely used.
• PNG (Portable Network Graphics) was developed around 1995, became a W3C recommendation in 1996, and has been widely implemented in most Web browsers as soon as 1998.

GIF

The GIF format is a format which compresses files using an algorithm called LZW, which keep traces of the colors and helps to reduce the size of the file.

GIF's strong point is that it is very widely supported and thus well established as the default choice for simple graphics on the Web. Compared to the other choices (especially PNG) GIF is not technically superior, but during the first years of the Web, when support for PNG was starting and growing, it was indeed a safer choice, and probably still is a safer choice at the time this QA Tips is written, though not by much.

One of the issues surrounding the GIF format is that the LZW algorithm was protected in the USA by a patent held by the company Unisys. The Unisys LZW patent expired in the USA on June 20, 2003. LZW patents are expired in Canada, France, Italy, Germany, the United Kingdom, and Japan.

PNG

PNG (Portable Network Graphics), an extensible file format for the lossless, portable, well-compressed storage of raster images. PNG provides a patent-free replacement for GIF and can also replace many common uses of TIFF. Indexed-color, grayscale, and truecolor images are supported, plus an optional alpha channel. Sample depths range from 1 to 16 bits.

For the Web, PNG really has three main advantages over GIF:

• alpha channels (variable transparency),
• cross-platform gamma correction (control of image brightness) and color correction
• two-dimensional interlacing (a method of progressive display).

PNG also compresses better than GIF in almost every case (5% to 25% in typical cases).

Though in some cases, it's important to notice that PNG could have a bad support by old browsers or specific features like transparency. To be more informed on the level of support of PNG in different browsers, you should read:

• Miscellaneous Transparent PNG Images using IMG Tags
• Current Status of PNG
• Browsers with PNG support

Vía: www.w3.org/QA/Tips/png-gif »