Image Thumbnail Links

This image exercise demonstrates the the use of thumbnail images linked to the full-sized versions of the respective images.

In this example, I used a graphics editor to crop a selected area of the full-sized images below. A good design tip is to crop the most visually aesthetic area, and to predetermine a convention for the size of your thumbnail images. My thumbnails are 96 pixels by 96 pixels.

Click on either of the thumbnails below to view the full-sized images (which will pop up in a new window).

thumbnail thumbnail

Note: You will need to wrap the images in anchor tags.

To easily understand the concept of how image thumbnails work the full-sized images are also available below.

miranda kerr covers miranda wings

The trick is to be able to remove these full-sized images from the web page. Common reasons to do this would be to conserve bandwidth and to make the web page load quicker, which makes sense if an image gallery were used.

You can either create relative links (links within your own site) or absolute links (to external sites). Bookmark links could also be used to direct a user to a certain horizontal area of the webpage.