thumb1

[ Fintragh's Homepage ][ Links & Feedback ][ Hostess Bio ][ Interdisciplinary Units ][ Tidbits ]
[ Art Smart ][ Art History ][ Properties of Design ][ Lessons & Activities ][ Educational Links ]

[ HOME:Images ][ Creating Thumbnails ][ Adding Thumbnails to a Web Page ][ Sample Thumbnails ]

Fintragh's
Lesson Plans and Activities

Creating Thumbnails
For Your Web Page

Thumbnail images got their name from the fact that they are close in size to the end of your thumb. Of course this can vary but they are intended to be very small images of a full size image. These images are used in two ways. One is to link the viewer to the full size image. The other is to link the viewer to another webpage or a location within the page.

Some web builders use thumbnail images because they take up less space on the web page. If the thumbnails are actually resized as an image they will sometimes take up less storage space as well. For this assignment you will be reducing the size of the image to make it a thumbnail image and, in some cases, cropping the original image.

This is an example of a thumbnail compared to the full sized image. You can see how much less space is used.

By clicking on the thumbnail you can view the full image.

Use your back option in your toolbar at the top of the screen to return to this screen after viewing the full image.

You will learn how to link the images in the next lesson.

In the unit on creating a graphic you learned how to scan and download an image. You also learned how to resize and crop images. Most thumbnails are images that have been reduced in size. Much of the quality of the image is lost in this process. However, because we are using our thumbnails to link to the full sized image, this isn't a major factor.

You can save some of the quality of an image by cropping a section of the original image before reducing it for your thumbnail.

Below you will see a full sized version of an image. Notice how much room it takes up.

Chuck & Joe

You can see how much space is actually saved by using thumbnails. You can imagine how long a page with several full sized images would take to load. Notice the loss of detail in this thumbnail.

In this cropped image you can see a vast difference between the two thumbnails. Even with the image being reduced there is more detail noticable in this example.

Once you have selected your graphics for this project you need to decide if you wish to crop your image and what size you wish to reduce them.

The width and height of your images will be very important when entering them into your HTML code. You might jot the measurements down with the file name to save time later.

Created 06/23/02
Updated 07/10/02

Email me at: jhuntington@spbs.net
OR