Web Design in a Nutshell

Multipart Images in Tables

There are a number of reasons why you may want to slice a large image into pieces and use a table to reconstruct it seamlessly on a web page:

Rollovers

If you want portions of the image—but not the whole image—to respond to the mouse passing over them (mouseover events or rollovers), it is more efficient to swap out just the bits that change instead of reloading the whole image.

Animations

Similarly, if you want to add animation to small areas within an image, it is better to break up the image and animate just the portions that move. This will result in smaller files to download.

Better Optimization

At times, you may find that an image contains distinct areas of flat color and distinct areas of soft or photographic images. Breaking the image into sections allows you to save some sections as GIF (the flat color areas) and others as JPEG (for graduated tones), to achieve better optimization and image quality overall. For more information on optimizing images, see Chapter 14, and Chapter 15.

Imagemaps

Break the image into separated linked images instead of using an imagemap. This allows linking to work offline, as well as provides alternative (ALT) text for each graphical element. This makes the page more accessible for people using non-graphical or speech-based browsers.

In Figure 10.25, I’ve divided the image into sections so I can save the television image as a JPEG and the rest as GIFs (since they are flat, graphical images). Also, I use rollover ...