thumbnail is a miniaturized version of a full-sized image. As a design element it can enable you to show many images without the overhead of full-sized versions.

One way to show several images on a page?without drowning your readers in download time?is to use thumbnails instead of full-sized images. For example, if you are creating an online gallery or photo album, consider displaying a series of thumbnails?you’ll give readers a sense of what is contained within, but readers will only need to wait a short while for the thumbnails to load. For example:

Before she was married, my grandmother traveled to Europe with her best friend. Here is a formal portrait of them in Berlin. Click the thumbnail to see the full-sized image.

You can be creative with thumbnails too?instead of a miniaturized version, you might clip a little piece out of the whole image:

See our favorite vacation photos!
We visited the island:	We hiked:	We played on the beach:

Or use thumbnails as a link to another HTML page with the larger image and some explanatory text. Or as a link to a video; the thumbnail would be one small still from the video. There are lots of creative ways to think about using small versions of images to represent links to larger uses of the image, so don’t be afraid to experiment and see what fits your design and your site’s needs. The trick is thinking beyond one use of one large image!

To create a thumbnail:

1. Open the full-sized image in your graphics program.
   
2. Reduce the image to your desired thumbnail dimensions or crop out a tiny tiny piece of the image that will represent the whole image.
   
3. Save your reduced-size thumbnail image as a separate file.
4. Use the thumbnail images in your page and make it a link to the larger image, page, or other image use. Click on this sample code for more detail about what it does.

   
   
   

Note: Do not create “lazy-thumbnails” by simply reducing the values of an IMG tag’s WIDTH and HEIGHT attributes! This totally defeats the point of using thumbnails, which is to reduce the image file sizes. Reducing WIDTH/HEIGHT to shrink an image doesn’t shrink its file size at all and you won’t save any download time.

Designs and Examples Using Thumbnails
Here’s a few examples of pages, from the Sightings archive, that make nice use of thumbnail images:

Newsphotos uses thumbnails as catalog device. Click a thumbnail and you’ll see a watermarked larger version, with ordering info.

PBS brings us American Quilts and the thumbnail is part of the gallery presentation. And check out the individual quilter’s sites for more samples of good uses of thumbnails.

CalPhotos, done by UC Berkley, makes good use of thumbnails on its results pages.