Thumbnail Images

Width = 300 pixels
Height = 200 pixels
File size = 180000 bytes

75 × 50 pixels

If you want to put images on your pages remember the time that it will take for them to be downloaded. To save visitors waiting for a large image to load (when they might not really want to see it) you could put smaller copies just big enough to be seen. These images are known as "Thumbnails" you can then make them into hyperlinks to the full size images.

Creating a thumbnail image is not the same as changing the viewable size of an image using the height and width values in the <img> tag.

For example, suppose the orange block on the right is a colour JPEG image. Even if the height and width were modified in the HTML code, the same image (all 180000 bytes of it) would have to be downloaded. However if you used a smaller thumbnail image, for example 75 × 50 pixels (25% of the original dimensions) the file size would be 1/16th of the original (11250 bytes) so it would download more quickly. You could create an entire gallery of thumbnail images and make each one a hyperlink to it's full size image.

Creating Thumbnail Images

Microsoft Photo Editor Microsoft Picture It!

You can use many popular image editing packages to create your thumbnail images. Most people will have Microsoft "Photo Editor" or Microsoft "Picture It!" on their PC. In "Photo Editor" Open your image and select Image > Resize from the menu bar, you can then resize it by a percentage or specify the dimensions. In "Picture It!" you can drag the corners of the image to resize it or choose to save it in a smaller format. Save your new image file using a different, but similar name. For example; prefix the thumbnail image filename with a letter "t" or "tn". This will make it simpler for you to keep a track of which thumbnail represents which full-size image.

Reduced size thumbnail image Original full-size image
Cropped thumbnail image

Alternatively, instead of reducing the size of the entire image to make a small thumbnail you could crop part of the image so that the subject is still recognisable but you can only see part of it.

The method you use will depend on the type of image and the design of the web page. In either case you can add a description of the image below it without making a significant impact on the file size of the web page.