Thumbnails
You'd think that making a set of thumbnails would be really, really simple, wouldn't you? Well, yeah, it is, but there are a couple of techniques and layout options which I think are important to know.
This page was last updated on 2012-08-21
Basic Theory
The basic idea of the thumbnail is that you can offer a page full of small images, and each one is linked to the full version of the image, giving your readers the option to preview any images they think they'd like to see in their full splendour, thus reducing hugely the download time of a page.
2 Ways to Shrink
There are two successful ways to make your group of thumbnails — crop and resize. You can use either or a combination of both to make the smaller images.
For instance, take these two thumbnails — one of each type. Click either to see the full picture. Incidentally, this is a montage of characters from the game Banjo-Tooie.
 Re-sized |
Cropped |
Now let's look at the relative merits of each technique:
- Resizing the image gives your reader an overview of everything in the picture, but they miss out on detail (the loss in detail is always proportional to the original size, which is why cropping and then resizing is such a good option.).
- With the cropped version, they get a much better feel for what the full picture will contain, and there is also a sense of wanting to know what else is in the picture that is not being shown. This will encourage readers to click into the picture more; and furthermore you can pick out a highlight from the picture and make it even more inviting.
Layout Options
You could just chuck all the thumbnails on the page (leaving horizontal gaps between them using hspace), and they will lay themselves out, but if you want more control over how the page looks you'll want to go with a fixed table format.
This works out better if you have made all your thumbnails the same size, so you can just put them all into a grid. Here's the table code:
<table border="1" align="center" width="70%">
<caption>Picture Gallery</caption>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Just put each of the <img> tags for your thumbnails in each cell. If you need more help with tables, go to our tables section.
Other Notes
In the examples above I set up the thumbnails to open the full-size images into a new window. This is accomplished with the target attribute — like this:
<a href="media/banjotooiebig.jpg" target="_blank">
<img src="media/banjotooiesmall.jpg" alt="Resized JPEG graphic" title="Click to view" border="2" width="158" height="150" hspace="10" /></a>
If you have left your thumbnails free from a table layout it is a good idea to leave in the border on images, so that number one — it will be clear as day that you're reading a thumbnail page; and number two — the colours can be used to show a reader if they have seen the full version before.
It would also be helpful if you included the image size, in kilobytes, of the full version. Put this information underneath each thumbnail, so people have prior warning that they're going to be downloading very large files. This information can be put into the alt attribute of each thumbnail too.
