Which Image Format Should You Use?

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.

BUZZ WORD

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).