6 Chapter 6 – Image Optimization
This chapter provides a brief introduction to images for the web. More details are given in Chapter 14, Digital Photography for Web and Cross-media, and Chapter 15, Photoshop for Web and Cross-media.
The most recent versions of web browsers can read RGB images in JPEG, GIF, PNG-8 and -24, and SVG (Table 6-1). Images for web sites should be saved at final size and 72 ppi resolution (except SVG which is resolution-independent).
| Format | Compression | Type | Transparency | Description |
|---|---|---|---|---|
| JPEG | variable | contone | no | Joint Photographic Experts Group, continuous tone, multiple compression levels |
| GIF | variable | indexed | yes | Graphic Interchange Format |
| PNG-8 | none | indexed | yes | Portable Network Graphic, 8-bit, indexed color |
| PNG-24 | none | contone | yes | Portable Network Graphic, 24-bit, continuous-tone |
| SVG | none | indexed | yes | Scalable Vector Graphic, line drawings and flat artwork |
Web vs. Print
If you’re used to working with images for print, you probably know that their resolution should be twice the screen ruling, or 300 ppi for a 150 lpi halftone screen. For those without a printing background, presses can only print solid ink. To reproduce properly, images must be broken down into nearly invisible dots. The screen ruling describes how many dots there are per linear inch.
If you work with page-layout programs like Adobe InDesign, you also know that you should size images before placing them in pages; but you can also adjust the size in InDesign, as a percentage of the original size.
Images for the web should also be sized for correct reproduction. Although they could be resized in Dreamweaver or by using the height and width styles, resizing will not produce the optimum file size. That is, sizing them smaller will make the resolution too big. Resizing larger may reduce the quality by producing a pixelized or stair-stepped image. Optimum file size is important because it speeds up page loading.
Web Image Formats
Continuous-tone. Continuous-tone, or “contone”, refers to bitmapped images that are photographs or drawings with many shades and blends of colour. Contone images are best saved in JPEG or PNG-24 format (Figure 6-1).
Flat colour. Flat, or indexed, colour refers to bitmapped images of drawings and line art that have a limited number of colours (Figure 6-2). Examples are comic strips and logos. Flat colour is best suited for GIF or PNG-8 format.
Vector graphics. Vector graphics include resolution-independent drawings and diagrams drawn in Adobe Illustrator, CorelDraw, and similar programs where points, lines, curves, and shapes, along with stroke and fill, are defined by mathematical equations (Figure 6-3). Vector graphics can be saved in SVG format for display on the web. SVG defines vector graphics in XML format. Linked SVGs are displayed in Dreamweaver as a separate tab with the XML code.
Browsers cannot display print-based vector graphic formats, i