Images: Cache, Slice, Compress

1. Implement Cache Control Headers
2. Properly Slice Up Designs into Images
3. Use an Appropriate Format and Compression

Take advantage of client caching. After the home page, users should be downloading mostly HTML content. Additionally, IE 6.0 has a nasty error that causes it to repeatedly download background images applied to links on hover. The following Apache example sets images to expire in 30 days and fixes IE 6's repeated downloading that displays as a flicker. Also see Dean Edward's Article on IE image flicker and Expires Headers.

# Stop IE Image FlickerBrowserMatch "MSIE" brokenvary=1BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1BrowserMatch "Opera" !brokenvarySetEnvIf brokenvary 1 force-no-vary# Set Images to Expire in 30 days<IfModule mod_expires.c>  ExpiresDefault A300  <FilesMatch "\.(gif|jpg|jpeg|png)$">    Expires A259200  </FilesMatch></IfModule>

2. Properly Slice Up Designs into Images

The goal is to reduce the number of images that browsers must download. Each image incurs overhead of an HTTP request and the image format's metadata. Combined images can save a significant percentage of bandwidth. I worked on a project this week that saved over 90% of the image download size by combining images. In one case, I combined 36 menu items including rollover and selected states into one image.

Many designers slice up graphics as if they are slicing a pie. But you've got to think three-dimensionally with layers and overlapping. Imagine a table with building blocks that represent HTML nodes and sheets of paper that represent images. An image can be the same size as its block so that it is placed edge-to-edge with the block. But an image can also be much larger than its block by wrapping part of the image around the sides of the block. And the blocks can be stacked.

A List Apart has some great examples of combining images: Sliding Doors of CSS, Part II; CSS Sprites.

3. Use an Appropriate Format and Compression

The "Save for web" feature in Photoshop is underused and not always properly used. One of it's main purposes is to allow the designer to choose a the format that balances image quality with compression. Each time you try a file format and compression, you will see a preview image in the center and a file size in the lower-left corner. Play around and balance quality and compression. Here are some rules of thumb:

• .png--Best for complex logos and graphics, especially when a .gif removes too many colors and a .jpg version is larger
• .jpg--Best for photographs and complex graphics when a .png version is larger (Usually .jpg quality of no more than 60 or 70 is a good balance of compression and quality)
• .gif--Best for logos and simple graphics when 256 colors or less looks good (Don't be afraid to use fewer than 256 colors!)

Mastering these three principles speeds up download times and enhances user experience. Ignoring these principles may annoy users when they wait and annoy web hosts when they receive their bandwidth overage bills.