How to Put a Thumbnail Photo on a Web Page

A thumbnail is a small version of a photograph or image that links to the larger version. Thumbnails allow visitors to get an overall view of the images in the page without taking up large amounts of space or forcing them to wait for the entire page to load before viewing the desired image. Thumbnails are ideal for photographs, images and photo albums.

Difficulty: Easy

Instructions

Prepare your photographs for the page:

1. Read 'How to Transfer Photographs Onto a Computer' (Related eHow's) to learn how to transfer your photographs onto your hard drive.

2. Save the transferred images in a special folder so you know where they are when you need them.

3. Start your web design application or HTML editor and position the cursor where the first thumbnail will appear.

There are basically two ways of inserting a thumbnail. The steps outlined in the section illustrate the first way, inserting the image and then reducing the size of the image. The advantage in doing this is that the image loads completely; therefore, when users click on it, the larger image, having already been stored in their cache, appears readily. The disadvantage is that this method can greatly reduce the speed at which your page loads.

4. Position the cursor at the insertion point and insert the image. In HTML, you would type the image tag and then the name of the image. With a web design application, you can use the menu commands to choose and insert the image.

5. Reduce the image until it is the size of a thumbnail image. With an HTML editor, type , replacing the image name and specifications. With a web design application, you can click on the picture, 'grab' it using one of the corner bars and reduce it manually (consult your applications Help File for more information).

6. Link to the original image. In HTML, type . Close the tag with . With a web design application, click on the image and select the Link To or Link command from the menu bar and choose the image name.

The second method of inserting a thumbnail is to create a smaller version of the original image. The advantage is that this smaller image doesn't take as much time to load and is often more clear than a reduced-size image. The disadvantages are that you must create two separate images for each image (the thumbnail and the original) and, when the visitor clicks to view the larger image, it may take time to upload.

7. Use your favorite graphics editing program to resize the image to the desired proportions.

8. Save and name the resized image as a smaller version of your original image. For example, imagesm.jpg.

9. Position the cursor at the insertion point and insert the image (see Section 2).

10. Link to the original image (see Section 2).

11. Save the page and upload it your website. Be sure to load all of the images, and the smaller images if you chose the second method.

12. Open the page in a web browser and click on each image to verify the link. Correct any links as needed.

Tips & Warnings

• Some web design applications, such as Microsoft FrontPage 2000, have a 'Make Thumbnail' command. This command creates, names and inserts the thumbnail, automatically linking it to the original image.