PNG or GIF?
Which one should you use? In a nutshell, PNG, except in some scenarios. Plus, a couple of PNG optimizers.
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.
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
Browser support for PNG is excellent in every browser except for IE/Windows, which to this day refuses to support alpha transparency in PNG images. You can always work around this problem though, especially if you're using CSS, like so:
#header {
background-image: url('/images/notgood.gif');
}
body > #header {
background-image: url('/images/better.png');
}
That code above will show the PNG to every browser that supports CSS2 (which right now is all of them except for IE/Windows).
That said, GIF still has its place. If you want simple animated graphics without resorting to Flash then it's your only other choice (there are animated PNGs, called MNGs, but browser support is abysmal). Use what you want, but be aware of each format's limitations and work around it accordingly.
I use PNG on some sites myself, and find myself using it more and more, but for the most part I stick to GIF or Jpeg.