Valid XHTML 1.0!
Valid CSS




Creating Thumbnails For Webpages

Web Ready photo - image thumbnail with link to full size

Thumbnail images are very small (viewing and file) size images i.e. they are resized images that are not only small physical size but small file size. Real thumbnails are NOT just images that look smaller because the are being resized with the width and height attributes of the img tag.

The benefit of a real thumbnail is that it loads a small size 'preview' images very fast. This will only happen if the file size is small. There is no real advantage using the image tag to make a thumbnail because the file size is exactly as the full image.

BTW: There are freeware programs for creating Thumbnails. A freeware that has more options for .jpg photos (but does not create web page code) is KD

Many people prefer to use their favorite graphics program to make thumbnails - one at a time. This allows 'fine tuning' instead of 'batch conversions'. No matter what is used, it's better to finalize the full size image (see optimizing tips) before creating a thumbnail. Making a thumbnail with a 'general' graphics program is simple:

  1. Open the full size image in a graphics program (such as ( Irfanview)
  2. They use Resize
    Resize Full Size Image n Save With New Name

    BE SURE that the 'Perserve aspect ratio' is set.
    Make Sure Aspect Ratio is Checked
    A typical thumbnail is about 200 x 200 or smaller. And the file size is less than 3 - 10k (depending on the original resolution / optimizing)
  3. Use Save AS to save the thumbnail with a NEW name.
    Hint: If the full image was named mypic.jpg then a thumbnail could be mypict.jpg e.g. add a 't' to the original name makes it easy to keep up with which thumbnail goes with each picture.

Using Thumbnails

By using an image tag inside an anchor tag, the image becomes a link. Placing the 'preview' thumbnail image in an anchor tag, will make it a link to the full size image (or a web page with the full size image).

If the image is named mypic.jpg and the thumbnail is mypict.jpg, the code for a web page would be:

<a href="mypic.jpg">
<img src="mypict.jpg" border="0">

For posting images on a forum, include the full path, such as:

<a href="http://yourdomain/mypic.jpg">
<img src="http://yourdomain/mypict.jpg" border="0">

Note: the border=0 turns off the lines (border) around an image that is a link. Set to 1 or above to show the border with the 'link' color.

Adsense Dead

Owner Has

Gone Fishing