thumbnails

This is not a page about manicures. "Thumbnails" is the name for the technique of putting smaller versions of images on pages, and making them links to larger versions of the image. Why do this? Because, as has been pointed out in some of this lesson's other pages, the time spent downloading images can amount to 90% or more of a web browser's time (and telephone bill). As a common use of web pages is to present a "gallery" of many images (no smutty remarks about porn, please), it makes sense to find some way to reduce download time in this instance. 50 Kb may be a fair size for an image (see the page on image size), but if there are thirty of them on a page, that's a long wait to see them all.

A thumbnail is a smaller version of an image, presented as a "taster". If the thumbnail is made into a link to the larger image, the user can choose whether or not to download the full image. Both the images here are used this way.

View of Helvellyn from Striding Edge (77 Kb)	View of Red Tarn (127 Kb)
Click on the thumbnails to see the full images: sizes as shown

Can't I just use height and width attributes to do this? It is important to remember that you need two completely separate versions of the image to make this technique worthwhile. Remember that using height and width does not change the memory size of the image, and therefore, does not change the amount of time it takes to download. Producing your smaller "thumbs" only by way these attributes completely defeats the object. I have indicated the size of the full image in kilobytes on the screen (this is good practice by the way), but the two images you actually see here are 10Kb and 15Kb in size. No height and width attributes appear so you can compare their actual sizes with those of the full images if you click on them.

What you need to do is create a copy of the larger image, load this copy into a graphics application, shrink it, and resave it as the smaller thumb, with a different file name. Look at the code which has produced the two thumbnails above:

<a href="helvellyn1.jpg">
    <img src="helthumb1.jpg" alt="Thumbnail: Helvellyn summit">
</A>

<a href="helvellyn2.jpg">
    <img src="helthumb2.jpg" alt="Thumbnail: Red Tarn">
</A>

The smaller images on this page are called helthumb1.jpg and helthumb2.jpg; the larger, original images are helvellyn1.jpg and helvellyn2.jpg. Apart from the fact they've got the same basic content, they are in fact entirely separate files.

It may be more helpful to see an example of this technique in action. The following link will take you to a site which uses thumbnails to show off its gallery of pictures of Scotland. It's not the greatest-designed site in the world, but it shows the use of the technique, and it does have some pretty good photos on it. As usual, the site will open in the second browser window.

Back to the top

Back to the menu for lesson 5