Thumbnail Images

If you have a gallery of a number of images of, for example the same school event, making them all the same size will enable you to fit them into a common layout which users can navigate through. You can incorporate simple navigation such as 'Previous' and 'Next' buttons to enable users to move through the gallery.

This page displays screenshots of photographs taken around a town - note how long the page takes to load:

• A page of large images - this image contains over 1MbB of images and so will take a while to load completely.

How do you show a number of images without forcing the user to view them all? The best way to do it is using thumbnails - small versions of the images so people can get an idea of what they will see - this saves them the time and expense of downloading images they don't want to see! If an image was called mypic1.jpg then its associated thumbnail might be mypic1_thumb.jpg or mypic1_small.jpg.

This screen shows how view the ssame images using a gallery (or in this case several galleries) of thumbnails - clicking on a thumbnail takes you to the full size image:

• Pages of thumbnails

Alternatively, have a look at our own local version as part of the Stevenage Church Trail in the RE section of the Hertfordshire Grid for Learning.

An article on how to make thumbnails work well is here:
http://www.useit.com/alertbox/9611.html (scroll part way down the page)

So how do we make thumbnails? Well you could:

• do it yourself - this is a lot of work and requires a graphics program to manipulate the original images and some knowledge of an HTML editor to create the pages
• use a program to do it for you - a program like ThumbHTML will create the small images, place them on web pages and link them to the larger images. Find out more »