Latest Tutorials

Tutorial Index
List of the Latest Tutorials

Hosting Plans

Cost n Services

Tutorials

Demo Page
PHP templates and photo album

HTML Generator
Basic CSS HTML Code Generator

CSS Tutorial
External Style Sheet Tutorial

CSS Template
HTML CSS Tableless 3 Column Layout

Custom 404
PHP code for a custom 404 page

Design Rules
Web Site Design Rules

Contact Form
Free PHP Contact Us Form Code

Optimize Images
For Web Page Sites

Thumbnail Tutorial
Optimizing images for Web
(Current)

PHP Template
Free PHP Tutorial

CGI 101
CGI Script Installation 101

Java Lake
Java Examples for Lake Class, snow, etc

HTML Basic
Basic HTML Web Page Code

URL Paths
Absolute vs. Relative Path

Site Submittal
Free Search Engine Submission

Calculate Bandwidth
Calculator for Monthly Usage

Register Domain
Tutorial (Godaddy)


Setup Info

Mail Help
Outlook Express Email Setup

FTP Help
WS-FTP LE Setup Help

Domain
Sign Up Now

Initial Setup
Startup n Setup Instructions



Information

Featured Sites
Hosting Client Sites

Budget Plan
Low Cost Budget Plan

Specials
IBDhost Hosting Specials

TOS
Terms of Service (TOS)

Contact Us
Email Contact Form Tutorial


Home Page
IBDhost Webhost Homepage

Updated:
Jan 26, 2008

© 2002 - 2008
Little Rock
Arkansas

 

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. One simple program that generates a simple web page is Thumbnailer . Another 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">
</a>

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">
</a>

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.