Choosing Web File Formats

Images need to be saved in one of several formats in order to be read by browsers. JPEG, GIF, PNG formats, and their variations are briefly described here. Look in Appendix B, File Formats, for more detailed descriptions.

JPEG (Joint Photographic Experts Group)

JPEG is a lossy compression format. It supports 24-bit color and is used to preserve the tonal variations in photographs. JPEG compresses file size by selectively discarding data. A higher-quality setting results in less data being discarded. Low JPEG settings result in blocky areas within the image and a profusion of artifacts, or blotchy spots. JPEG compression can degrade sharp detail in images and is not recommended for images with type or solid areas of color. See Figure 25.17 for a comparison of JPEG settings.

Figure 25.17: JPEG compression-quality comparisons: (left) Low and (right) Maximum

Note  

Each time you save the file as a JPEG, you discard more data. To avoid progressive deterioration, you should save JPEG files from the original image, not from a previously saved JPEG.

If you use the JPEG Options dialog box (File ’ Save As ’ JPEG) to save an image, you can specify characteristics of the JPEG (see Figure 25.18).

Figure 25.18: JPEG Options dialog box

The JPEG format does not support transparency. When you save an image as a JPEG, transparency is replaced by the matte color. Use the background color of the Web page as the matte color to simulate transparency. Choose from the Matte list to select a color for the background of an image that is on a transparent layer. The color will fill the areas where there are transparent pixels when the image is seen on the browser. If your image is going to be displayed over a pattern or multiple colors, save it as a transparent GIF.

In the Image Options section, enter a quality value from 0 to 10, or choose Low, Medium, High, or Maximum from the pull-down list.

Choose a format option by clicking the radio buttons :

• Baseline ( Standard ) This is the most widely supported format. It displays the image only after it has completely downloaded.

• Baseline Optimized produces slightly smaller files than Baseline, but is not as widely supported. It displays the image from top to bottom as it downloads.

• Progressive enables you to specify 3, 4, or 5 scans . These have the effect of displaying progressively higher-resolution versions of the image as it is downloading. Use this option to hold your viewer s attention while the image loads. Progressive is not as widely supported as Baseline.

In the Size section, the number on the left of the slash is the file size. The number on the right is the download rate, which you can determine by choosing a modem baud rate from the pull-down list.

GIF (Graphics Interchange Format)

The GIF format is used primarily for saving images with solid areas of color and sharp edges ”for example, line art, logos, or illustrations with type. It is also the format for saving animations produced in ImageReady.

Unlike JPEG, the GIF format uses lossless compression. Yet because GIF files are 256 colors or fewer, optimizing an original 24-bit image as an 8-bit GIF can degrade the image. You can create lossy GIFs, which produce much smaller files but sometimes produce artifacts similar to those found in JPEG images. You can control the number of colors in a GIF image and adjust the dithering options to simulate the effect of blending.

You can save a file as a GIF in two ways. Choose File ’ Save As ’ CompuServe GIF to bring up the Indexed Color dialog box, where you can optimize the image. (See Exporting to GIF later in this chapter.) The second method is by using the Save For Web option.

PNG-8 and PNG-24 (Portable Network Graphics)

The PNG-8 format is similar to GIF 8-bit color. It uses 256 colors, supports transparency, and is lossless, but is not supported by older browsers, and doesn t support animation. PNG-24 is an excellent format because it combines the attributes of JPEG and GIF in lossless compression. It supports 24-bit color and is fine for saving photographs to the Web because it preserves tonality . Like GIF, PNG-24 preserves the sharp detail found in line art, logos, and type. It also supports transparency and matting .

Another great feature of the PNG-24 format is that it supports multilevel transparency, in which you can preserve up to 256 levels of transparency to blend the edges of an image smoothly into a background color. This seems like the dream format, doesn t it? The only (minor) drawback is that versions of the major browsers from 1999 and earlier don t support it, and it takes a while before the latest browsers are used by the majority of Web users. Take this into consideration when deciding to use the PNG formats.