Popping Graphics
(return to, Web design)
Graphic images are the most compelling feature of web sites, second only to hyperlinking in overall niftiness. Skillful web designers wrap beautiful pictures with informative text to tell a perfect story.
It's so simple that it sounds inane. Yet pitifully bad rendering of web graphics is the most common and most serious error of webmasters. From the smallest AOL hobby site, to the portals of Fortune 500 companies, there exist on the web billions of digital images which are too large in size (kilobytes) to be carried effectively over modems.
Bon voyage, webmaster, your visitors can't wait
Fat is slow. The more kilobytes, the slower the download.
Image optimization is the process of getting the best look out of your graphics, in the fewest kilobytes. Like magic, you can make your web pages "pop" onto visitors' monitors. They will be pleased at the rapid response. And even for web visitors on broadband (DSL, cable, etc.), the fact is, most bloated images can still be rendered to look better in fewer kilobytes.
Do you want your graphics to pop?
| |
For tonal images (e.g., most original photographs) that will eventually be rendered as JPEGs: |
|
|
|
| 1. |
Scan photographs (or take original digital images) at least 2-3 times the scale (2-3 times the pixel dimensions in horizontal and vertical axes) of the final rendering. For web images this typically involves scanning a 2-4 megabyte image, for JPEGs that will later be rendered at 8-15 kilobytes. (More information: Scanning Web Images.) |
| 2. |
Preserve your digital assets (unaltered original scans) in full scale and original quality; work only on the copies (in case you ever have to go back). |
| 3. |
Adjust for contrast, color, and crop at full resolution, using the best quality image editor, e.g., Adobe Photoshop. |
| 4. |
Compress as JPEGs while reducing the scale in one step. The most effective program to accomplish this, in our opinion, is Fluffy Clouds' Ignite 2, http://www.ignite-it.co.uk/nn4/, and Macromedia's Fireworks 3, http://macromedia.com/software/fireworks/ is a close second in image efficiency and overall control of image quality. Choose a JPEG quality value generally somewhere between 45% and 60%. Some programs, such as Ulead's SuperSaver Pro, http://www.webutilities.com, provide alternative subsampling methods. A fourth alternative is the token-based web-optimizer GifWizard, http://gifwizard.com
|
|
|
|
| |
For vectored images and those with sharply contrasting edges (and photographs with flat background occupying 70% or more of the image area) that will be rendered as GIFs: |
|
|
|
| 1. |
Draw the vectored graphic with an image editor that will later be able to do the final rendering from vector to rasterized GIF, or else first draw the image with flat areas of constant color, preferably from a browser friendly (216-color) palette. |
| 2. |
Be very careful about planning changes in scale. In general, scale changes of full integral units are less harmful to image efficiency. For example, if you draw an image at 800 x 600 pixels, and plan to later reduce the scale to 400 x 300 pixels, it will usually render with high quality, and low digital size. The reason for this is that when images with sharp edges are expanded or reduced in scale, they tend to "fill in" the sharp edges with intermediate colors, which increases the total number of colors in the image, while creating a fuzziness. |
| 3. |
Remove extraneous defects from the image, and make sure that areas of flat color remain flat. |
| 4. |
Compress as GIFs while reducing the scale in one step, if possible without dithering. Some programs such as Ulead's SuperSaver, provide alternative color weightings that can improve optimization, although in our experience the green weighting is generally best. Ignite allows for the use of hybrid colors, which consist of checkerboard tapestries of alternating browser-friendly colors, expanding the palette from 216 to 1331. Most efficient GIF images can be rendered with 10-32 colors. |
|
