Tiled Images in HTML

Written by Paul Bourke
October 1998

It is often useful to split large images on a WWW into smaller pieces. For example, a number of smaller images can make the page "appear" to download faster and it allows the user to view parts of the image before the whole image has arrived. It can be useful when parts of the image are to be used as links/buttons, this may be easier than using imagemaps. Perhaps the most common reason is to include animated gifs within a larger image.

Example 1

Here are the four pieces, if you can see any gaps on your browser please let me know. (The top left corner acts as a link button.)

The important components are:

Here is the html that generated this example. More convoluted examples only require a more involved table description, and will almost certainly need to use the columnspan option.

Note: the trickier part when splitting up an image is to use the same colour map for all the pieces, that is, if your image has more than 216 colours. The ideal way to do this is to convert the original into a gif and use the resulting colour table when converting the pieces.

There's the original which hopefully looks the same as the first image.

Example 2

Animating a small part of a larger image. If the cell on the bottom row with the dolls hand waving seems to be in a different colour palette then please let me know what browser you are using and what colour depth monitor you have.

All the frames above have the same colour palette.