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.

Get Web Design in a Nutshell, 3rd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.