Summary

The key to optimizing web graphics is to minimize their size , number, and quality, and maximize cropping. Combine adjacent images and use client-side imagemaps instead. Substitute CSS-based rollovers for bandwidth-hungry image-based rollovers. Replace graphic text with styled text. Finally, to minimize HTTP requests , reuse images with the same URL.

For palette-based formats, each reduction in bit-depth gives an abrupt drop in file size. When reducing smooth-toned images, use a high-quality quantizer and a dash of dithering, influence histograms, or consider switching to a JPEG. Avoid antialiasing in GIFs and PNGs to minimize color palettes. Design GIFs and PNGs with the horizontal in mind. Maximize pixel patterns along scanlines and use the "lossy" slider in Photoshop and Fireworks for GIFs to increase redundancy to maximize LZW compression.

Design animated GIFs to have small horizontal motion areas with few frames and limited loops . Optimize animated GIFs with programs that offer intra-frame optimization for maximum compression.

With all graphics, you can't go wrong if you do the following:

• Eliminate and combine your images to minimize HTTP requests.

• Convert graphic text into styled text.

• Maximize cropping and minimize dimensions.

• Use the right image format (JPEGs for photographs).

• Use interlacing with care (avoid interlacing on smaller images and most PNGs).

• When capturing photographs, use a stable platform.

• Minimize noise, smear, and complexity.

• Use weighted optimization to reduce less important areas and blur backgrounds (for JPEGs).

• Minimize colors (bit-depth) for palette-based formats.

• Use a high-quality quantizer on true-color originals and limit dithering.

• Set your image resolution to 72 dpi.

• Specify the actual height and width of all images.

• Use grayscale where possible.

• Use thumbnails linked to larger images.

• Experiment with different settings and programs.

Further Reading

For more information on web graphics formats and optimization, see the following resources:

• Graphics.com (http://www.graphics.com)News, reviews, and information on the graphics world.

• DeskTopPublishing.com (http://www.desktoppublishing.com)One of the oldest and largest resources for artists and web designers.

• "Optimizing Web Graphics" by Andy King (http://www. webreference .com/dev/graphics/)Tools and techniques you can use to shrink web graphics. Originally appeared in the December 1996 issue of Web Techniques .

• Compressed Image File Formats: JPEG, PNG, GIF, XBM, BMP by John Miano (Addison-Wesley, 1999)Boils down the specifications into understandable language. Focuses on JPEG and includes C code.

• PNG: The Definitive Guide by Greg Roelofs (O'Reilly, 1999)The ultimate reference for the PNG format, which includes some optimization tips for authors and programmers.

• Web Designer's Guide to Graphics: PNG, GIF, & JPEG by Timothy Webster, Paul Atzberger, and Andrew Zolli (Hayden Books, 1997)Although somewhat dated, this full-color book shows you how to create quality graphics that download quickly.