Web Design in a Nutshell, 3rd Edition

Choosing the Right Format

Part of the trick to making quality web graphics that download quickly is choosing the appropriate file format for the job. Table 28-1 provides a good starting point.

Tip

If you use Adobe Photoshop/ImageReady or Macromedia Fireworks, you can preview your image and resulting file size in various file formats to help make choosing a format easier; you can even do side-by-side comparisons.

Table 28-1. Choosing the right file format

If your image...	Use...	Because...
Is graphical, with flat colors	GIF or 8-bit PNG	It excels at compressing flat color.
Is a photograph or contains graduated color (such as a watercolor painting)	JPEG	JPEG compression works best on images with blended color, and the format can display millions of colors, resulting in better image quality at smaller sizes.
Is a combination of flat and photographic art	GIF or 8-bit PNG	In most cases, it is preferable to prevent dithering in the flat colors and to tolerate some dithering in the photographic areas. JPEG is notoriously inefficient at compressing flat colors and may blur text and fine details.
Requires transparency	GIF or PNG	Only GIF and PNG allow transparent areas within the graphic.
Requires animation	GIF	GIF is the only file format that can contain animation frames.