There are three image formats that can be used to create images for the Web: GIF, JPEG, and PNG. The following are brief descriptions of each:
GIF (Graphic Interchange Format) is an image format developed by Compuserve to facilitate the exchange of graphics over its online network. GIF supports creating images that include up to 256 simultaneous colors, as well as interlacing, transparency, and multiple frames (GIF animations). GIF uses a form of lossless compression, which means that pixels are not thrown away, but can be recovered by resaving the image in an uncompressed format (TIFF or BMP, for instance).
JPEG (Joint Photographic Experts Group) is an image format that supports creating images with a 24-bit color palette (up to 16.7 million colors). JPEG does not support transparency or multiple frames. Progressive JPEG (a JPEG version) supports progressive display (similar to interlacing in GIF images). JPEG uses a form of lossy compression, which means that pixels are thrown away and cannot be recovered when resaving the image in an uncompressed format.
PNG (Portable Network Graphic) is an image format that supports creating images with 24-bit to 64-bit color palettes, as well as a variable transparency. It does not support multiple frames, but a related format (MNG) does. PNG was designed to provide an improved and patent-free replacement for GIF (which used a patented method of compression). Like GIF images, PNG images use a lossless form of compression.
The PNG image format would seem to be the best choice from a technical standpoint, but only the most recent browsers provide good support for displaying PNG images, while many users continue to use browsers that do not support the PNG format at all. The same holds true for progressive JPEGs—just too many users are still using browsers that don't support progressive JPEGs to recommend using that image format.
JPEG images are a much better choice than GIF when it comes to displaying photograph images (or other images with lots of continuous color tones), because they can choose from a color palette of 16.7 million colors. However, JPEG images have one very glaring weakness—because of the compression scheme they use, the edges of letterforms (or other sharp edges) are rendered as noticeably fuzzy. If you want to save an image with sharp text, you don't want to save it as a JPEG image.
The GIF image format's primary weakness is in displaying images that originally contain many more than 256 colors (such as photographic images or other images that contain continuous color tones or gradient blends). In those images, the resulting image is likely to display undesirable banding or dithering effects in place of continuous tones and blends.
The term dithering refers to the attempt to approximate a color that is otherwise not present, by placing differently colored pixels adjacent to each other. The result is that the eye may be fooled into thinking that only one color is being displayed, because it cannot easily distinguish between individual pixels. At its worst, this can turn a smooth color blend into a splotchy mess. Banding effects, however, can result when an image is saved as a GIF image with dithering turned off, due to the absence of sufficient colors to reproduce a continuous tone or blend.
The GIF image format, however, has some very real strengths. For one thing, an image saved as a GIF will be smaller in bytes than when it is saved as a JPEG. Even an image with more than 256 colors may not overly suffer a loss of visual quality when reduced to only 256 colors, and still be smaller in size when saved as a GIF than when saved as a JPEG. The GIF image format also has a trick up its sleeve, which is the ability to be saved using an optimized color palette, which includes only colors that are included within an image and allows colors to be selected from the same 16.7 million colors that a JPEG image selects from (although the palette is still limited to 256 colors), which can make dithering much more effective.
Therefore, when deciding which image format to use, you should follow these guidelines:
Do not use PNG or progressive JPEG images in pages intended for wide distribution. If you use them, use some means (such as the invisible object method demonstrated earlier in this book) to alert or redirect users of non-supporting browsers.
Use the JPEG image format to display images with many more than 256 colors, such as photographic images with continuous color tones, as long as the image does not contain text letterforms that need to be sharply rendered.
Use the GIF image format to display images with fewer than 256 colors (or which will not noticeably suffer when the number of colors is reduced to 256). If sharp rendering of text is desired, save the image as a GIF image, but with an optimized color palette.
Never use BMP or other uncompressed images in Web pages, since they are many times larger in bytes than compressed images (such as GIF, JPEG, or PNG images).