Creating Thumbnails

Whenever you want to save the person viewing your page the trouble of downloading a large image every time they go to your page, or even if you are concerned that it may take up too much space on your page, it is a good idea to use a thumbnail image. A thumbnail is a small version of a larger or more detailed image which, when clicked on, displays the real image.

There is a right and a wrong way to do thumbnails, though. The wrong way is to use the WIDTH= and HEIGHT= options of the HTML IMG tag to resize the high quality image. Some Web page design programs do it this way when you tell them to resize an image.

The correct way is to use Photoshop or a similar program to reduce the original image in size and quality and save it as a separate file. A thumbnail should generally be no more than about 20,000 bytes in size. Here is an example of the right way:

In this case, fruitthumb.jpg (the small version) is 14,875 bytes, whereas fruit.jpg is 56,008 bytes.

There is another trick you can use to reduce the thumbnail's quality even more, and that involves actually using the WIDTH= and HEIGHT= options. Only in this case, you are using them to have the browser increase the size of an even smaller image. Take a look at this example:

Even though this thumbnail appears to be the same size as the previous one, it is actually being "blown-up" by your browser by 200%. This intruduces jaggedness, as you can see, but it means that fruitthumb2.jpg only needs to be 10,553 bytes. Just make sure that the increase in width and height are of the same factor. Otherwise, the scaled image will look distorted.

Top | Previous Page | Next Page