A "thumbnail" image is a smaller version of an original image that is linked to that original image so when the thumbnail is clicked on, it will open the original image. Thumbnails have a smaller file size, which means faster loading time for the pages. Here are the advantages of using thumbnails:

• web page loads faster
• conserves bandwidth
• can fit more images on the page

Note:

• You should not create thumbnails inside the Homestead SiteBuilder, because resizing images inside the SiteBuilder does not change the file size, only the image size.
• Resizing images inside the Sitebuilder does not make the pages load faster.

You will need to create thumbnails of your images using an image editor. If you do not have one, you can download a free image editor program from www.download.com (click here to choose one) or www.webattack.com (click here to choose one).

This tutorial will use IrFanView, a free program (click here to go to download page), but the same basic instructions apply to other image editing programs.

Here's how to create a thumbnail image:

1. Open the program IrFanView

2. In the file menu, along the top of the program, click on "File" and select "Open"

3. Browse and select the desired image to turn into a thumbnail

4. The image will appear in the Irfanview program

5. In the file menu, along the top of the program, click on "Image" and select "Resize/Resample"

6. A window will appear, and you can change the size of the image by typing in the size that you want (e.g. 80x80), or the percent of the original.

Note:

• If the "Preserve Aspect Ratio" box is checked, the program will automatically change the length or width, to make sure the image is a proportionate size and not distorted.
• If you want a fixed thumbnail image size (e.g. 100x100) and the image does not have the same height and width, you will have to uncheck the box "Preserve Aspect Ratio".

7. After choosing the desired size, click "OK"

8. The new image size will appear in the program.

9. In the file menu, along the top of the program, click on "File" and select "Save"

10. In the file name, add a "_t", or something at the end of the file name to indicate that it is the thumbnail version. Note:

• The name of the thumbnail file cannot be the same as the original image, otherwise it will replace the original image.

11. Click "Save"

12. Imported both images into your Homestead web site using the SiteBuilder file manager or the "Imported Image" element.

13. In the SiteBuilder, use the "Imported Image" element and place the thumbnail image on your page.

14. In the element editor, click on the "Link" button

15. Choose the "file" option, and select the original image, or choose a "page" option to link it to a page which will have the original image.

16. Click "OK".

17. Click "Save", Click "View", and test out the thumbnail image link.

Note:

• For IrfanView Help, in the file menu, along the top of the program, click on "Help" and select "IrfanView Help".

Related links:

• HS guide for thumbnail links that open in a special popup window, click here

(Please note that none of the above are official partners of Homestead, nor have we done any extensive testing of what they have to offer. Use of their tools and services must be undertaken at your own risk.)