How do you ... do thumbnails?
How do you make a thumbnail image?

For those of you who don't know, a thumbnail image is one smaller size image that links to a larger size image (usually the same picture). The benefit of this is to save on download time and web space.

There are two ways to create a thumbnail image. One correct way, and one wrong way. First is the wrong way...

If there is a wrong way, why show that? Knowledge is power. If you know this is NOT the way to do it, you will not be talked into doing it this way. The possibility of decreasing a future error is worth it.

The WRONG way to create a thumbnail image is to take the original (large) image into the IMG code and adjust the WIDTH and HEIGHT properties. Yes, this will work but there are two major downfalls :
  1. The image (memory) size does not decrease so the load time will remain the same as if the larger image was trying to download and display.
  2. The thumbnail image will be blurry or distorted as the HTML coding is trying its best to accomodate the new WIDTH and HEIGHT paramters which do not match the actual dimensions.
This method of thumbnail coding cancels out the original purpose of creating thumbnails to begin with. Here is the larger example image scaled down using WIDTH and HEIGHT.
Looks similar to the first image, but it got a bit fuzzy. That's just a small example.

Now the actual CORRECT way to create a thumbnail.

You will need an image editing software. You can find a good one at your local software retail store or on any major download site. Remember that FREEWARE is free and SHAREWARE is a trial to pay later deal.

Open your original (large) image in the editor. Use the RESIZE command to create a smaller version of the original image. Now SAVE AS that new sized image with a new filename. It's important not to use the original filename since that is your larger image and you don't want to over-write it.

Upload both images to your online area. Enter the coding in your web page as seen below and you are set to go. The example shows a regular linked image that goes to the larger image instead of to a new page.

<a href="LargerImage.gif" target="_blank">
<img src="SmallerImage.gif" border="0" width="75" height="75">

Clicking on the smaller linked image will make a new window appear showing the larger image.
How do you ... do thumbnails?

Advertise in the banner along the top, Click here!

Valid XHTML 1.0 Transitional Valid CSS! Text Link Ads