Image Formats

As I just mentioned, three image formats are supported by every major web browser: GIF, JPEG, and PNG. JPEG and GIF are the old standbys, each useful for different purposes. PNG is designed as a replacement for the GIF format, which was necessary after Unisys invoked its patent rights on the GIF format. (The patent has since expired.) To design web pages, you must understand and be able to apply both image formats and to decide which is appropriate to use in each case.

GIF

Graphics Interchange Format, also known as GIF or CompuServe GIF, is the most widely used graphics format on the Web today. It was developed by CompuServe to fill the need for a cross-platform image format.

Note

GIF is pronounced jiff, like the peanut butter, not with a hard G as in gift. Reallythe early documentation of GIF tools says so.

The GIF format is actually two very similar image formats: GIF87, the original format, and GIF89a, which has enhancements for transparency, interlacing, and multiframe GIF images that you can use for simple animations.

The GIF format is great for logos, icons, line art, and other simple images. It doesn't work as well for highly detailed images because it's limited to only 256 colors. For example, photographs in GIF format tend to look grainy and blotchy. The problem is that with the limited color palette, it's hard to create smooth color transitions.

JPEG

JPEG, which stands for Joint Photographic Experts Group (the group that developed it), is the other popular format for images on the Web. JPEG (pronounced jay-peg) is actually a compression type that other file formats can use. The file format for which it's known is also commonly called JPEG.

JPEG was designed for the storage of photographic images. Unlike GIF images, JPEG images can include any number of colors. The style of compression that JPEG uses (the compression algorithm) works especially well for photographs, so files compressed using the JPEG algorithm are considerably smaller than those compressed using GIF. JPEG uses a lossy compression algorithm, which means that some of the data used in the image is discarded to make the file smaller. Lossy compression works extremely well for photographic data, but makes JPEG unsuitable for images that contain elements with sharp edges, such as logos, line art, and type. JPEG files are supported by all major web browsers.

PNG

PNG, pronounced "ping," was originally designed as a replacement for GIFs. It stands for Portable Network Graphics. Only the oldest browsers don't support PNG natively. Current browsers all support PNG, and it has some important advantages over GIF (and to a lesser extent over JPEG). Like GIF, it is a non-lossy image format. No information about the image is lost when it is compressed.

It has better support for transparency than GIF, and supports palette-based images (like GIF) as well as true-color and grayscale images (like JPEG). In other words, you don't have to worry about color usage with PNG, although limiting color usage will result in smaller files.

More and more sites are using the PNG format for images, but due mainly to inertia, GIF and JPEG are still the most used formats. For more information on PNG, see http://www.libpng.org/pub/png/.