Chapter 27. Choosing the Right Image File Type

Image files come in many different formats, but only a few of these work well on the Web. Browsers that display graphics tend to cluster their support around the most common file types, but, as you might expect, browsers don't agree on exactly which types of graphics files to display. The Microsoft browser, for instance, supports Windows bitmap files (BMP), but the Netscape browser does not.

To decide which image formats to use on your site, ask yourself two questions:

1. Which file types work in all the major browsers?

2. Of those file types, which one creates the lightest file size without sacrificing image quality?

TIP

The GIF and PNG file types are very similar. You use them for the same types of images, and they give you about the same file weight. Once upon a time, the main difference was that the GIF format was the property of CompuServe, while PNG has always been nonproprietary. However, the patent on GIFs has since expired worldwide, and the format now belongs to the world.

The answer to the first question is straightforward. All the major browsers display GIF, JPEG, and PNG images, so you want to limit your Web graphics to these three formats.

The answer to the second question is the dreaded, "It depends." Generally speaking, photographs and other images with a large amount of color information work best in the JPEG format, while line art and images with large areas of flat color work better as GIFs or PNGs. Why? JPEGs don't have a built-in palette or color chart, while GIFs and PNGs do. The palette of a GIF or PNG determines which colors appear in the image, up to a maximum of 256 different shades. As you add more colors to the palette, the heavier the image becomes overall. Since photos usually have lots of subtle shading and gradation, the 256 color slots in a GIF or PNG go pretty quickly. You end up with a GIF or PNG that looks grainy, yet its file size is heavier than a JPEG because of its fully loaded palette.

GEEKSPEAK

A palette is an image file's built-in color chart. GIFs and PNGs have palettes of up to 256 colors, while JPEGs don't have palettes and therefore aren't limited to 256 colors.

However, if your image has fewer than 256 colors, the GIF and PNG formats typically give you lighter file sizes while maintaining overall image quality.

TIP

Definitely mix and match image types on your site. Don't fall into the trap of using all JPEGs or GIFs. Pick the format that works best for each particular image. Professional graphics software such as Adobe Photoshop and Macromedia Fireworks allow you to compare the various formats for your images side by side, so you don't have to play the guessing game.

Even so, the number of colors isn't the only consideration, because the various formats offer different features, too. GIFs and PNGs allow you to define transparent colors, and GIFs allow animation. JPEGs have neither, as you can see in Table 27.1. And some photos look fine in GIF or PNG format, even with the loss of color information. It behooves you to test your images in all three formats to get the best possible Web file.

Table 27.1. Common Web Image File Types

FILE TYPE	PRONOUNCED	STANDS FOR	PALETTE?	TRANSPARENCY?	ANIMATION?
GIF	jiff or giff	Graphics Interchange Format	Yes; up to 256 colors	Yes; one level of transparency	Yes
JPEG	jaypeg	Joint Photography Experts Group	No; no color limit	No	No
PNG	ping	Portable Network Graphics	Yes; up to 256 colors	Yes; multiple levels of transparency	No