WEB DESIGN GARAGE [Electronic resources] نسخه متنی

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:

Which file types work in all the major browsers?

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

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.

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.

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.