Optimizing Web Graphics

Graphics optimization is key for fast web page display. In this chapter you'll learn how web graphics formats work and how you can take advantage of their compression algorithms to minimize file size. Graphics programs optimize the file size and quality of GIFs, JPEGs, and PNGs to varying degrees. Each has its own strengths and weaknesses. You'll realize the most savings in eliminating and replacing them with text and CSS, combining neighboring graphics, and reusing graphics with the same URLs.

Excluding network performance and hardware and software configurations, the size of your HTML "base" page and the number and size of your images and multimedia objects determines the display speed of your pages. The base page size determines the initial download speed of your pages, while the embedded content determines the total download time. Because images and multimedia make up over 50 percent of the average web page, it is important to pay careful attention to the number and size of your images.

Figures

Figures 12.1 and 12.2 - Correcting Levels after PhotoCD scan
Figure 12.3 - The JPEG compression algorithm
Figure 12.4 - Saving to a JPEG in Photoshop
Figure 12.5 - Better image sampling defines sharp edges in ProJPEG
Figure 12.6 - JPEG Wizard, a power tool for Windows
Figures 12.7 and 12.8 - Overlaying GIF and text over JPEG demo
Figure 12.9 - Full-color balloon quantized to 64 colors in PhotoGIF (with a dash of dithering).
Figures 12.10 and 12.11 - Transparency Gotchas
Figure 12.12 - Optimizing a sample web image - a toolbar
Figure 12.13 - Web Image Guru in action - smoothing a GIF in Windows

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. 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, (tripod, image stabilization, or a Gyroscopic stabilizer)
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 72dpi.
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.

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.
Designing Web Graphics 4: By Lynda Weinman (New Riders, 2003). A great introduction to web design. It's not just about graphics.
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.
Web Style Guide, 2nd ed.: By Patrick Lynch and Sarah Horton (Yale University Press, 2002) for an excellent introduction to web graphics. See also http://www.webstyleguide.com/graphics/.

Graphics Software

There are too many tools to list them all here. The following list includes only tools with PNG support. Most of them support GIF and JPEG as well.

The most popular of these are listed here:

Sites

DeskTopPublishing.com: One of the oldest and largest resources for artists and web designers
Graphics.com: News, reviews, and information on the graphics world

Products

CacheRight: Effective caching of images will speed up site for repeat visitors and reduce server load. This tool allows developers to set caching policies for all page content at the header level (beyond META tags cache control).

Articles

A Basic Introduction to PNG Features: By Greg Roelofs.
Adding Images to Your Site: Information on scanning slides to PhotoCD and correcting images in Photoshop. By Philip Greenspun.
DEFLATE Compressed Data Format Specification Version 1.3: By L. Peter Deutsch. The compression algorithm used in PNGs and ZIP.
The JPEG FAQ: By Tom Lane.
Optimizing Animated GIFs: For more details on optimizing animated GIF89as and tools.
Optimizing Web Graphics: Tools and techniques you can use to shrink web graphics. Originally appeared in the December 1996 issue of Web Techniques. By Andy King.
PNG Specification 1.2: By Glenn Randers-Pehrson and Thomas Boutell eds.
"A Universal Algorithm for Sequential Data Compression": Jacob Ziv and Abraham Lempel, IEEE Transactions on Information Theory 23, no. 3 (1977): 337-343.
Using Kodak Photo CD Technology for Preservation and Access: A Guide for Librarians, Archivists, and Curators. From Cornell's Anne R. Kenney and Oya Y. Rieger
Web Page Design and Download Time: Jing Zhi, CMG Journal of Computer Resource Management, no. 102 (2001): 40-55. Zhi, of Keynote Systems, found that for fast connections (> 128Kbps) after TCP slow start, download time is nearly linearly related to the number of packets sent, which is determined by the size of each file and packet size. Four or more equal-sized images downloaded faster than one large image due to browser multithreading. For slower connections, download time was dependent on total content size and the number of objects.