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.