THUMBNAIL IMAGES
AS HYPERLINKS
( Resizing, reducing and reformatting graphics )
A "Thumbnail" is a small graphic image that is usually used as a link to either a larger version of that image or to another web site. The image used for the Thumbnail needs to be reduced and resized to a smaller graphic for a quicker download of your web page. The viewer then has the option to click on the Thumbnail if they want to see the larger picture, which will take longer to download, or if they want to visit another site that it is linked to.A common mistake among web page designers (new and experienced) is not "reducing the bytes" and actually "resizing" the original image into a Thumbnail picture. A lot of web designers will just change the WIDTH and HEIGHT attribute of the picture in their < IMG SRC > tags, often to a size that is not the exact ratio of the original.
This causes two major problems with the Thumbnail image:
- The "imposter" Thumbnail image may appear distorted
- The browser still reads the "total" bytes of the original large picture and loads slowly even though it displays the smaller size picture that you have specified in your WIDTH and HEIGHT attributes
Here is an example of what happens --- ( Lots of bytes to download here -- let the images load completely! )
|
Actual size of original .jpg
|
"Guessing" the size of the Thumbnail from the original .jpg
Notice that we are loading the same amount of bytes even though the image "looks" smaller -- and the new image is distorted because it wasn't resized to the same ratio as the original (which happens to be a square). Right click on the picture above and then on "View Image" (jjorange.jpg) -- you'll see that this smaller "imposter thumbnail" picture is the same as the larger 'original one' on the left. Click on your "Back" button to return. |
|
This is the proper set-up for a Thumbnail image.
It has been resized, reduced and reformatted to a .gif using Paint Shop Pro. Right click on the picture and then on "View Image" (jjorangethmb.gif) -- you'll see that this is the actual size of the thumbnail image. Click on your "Back" button to return.
By reducing, resizing and reformatting the original large picture for a Thumbnail image, we have also reduced the bytes that will be read by the browser from "37,306" to "7,387" thereby reducing the time it takes for the page to download. Although I have decided not to put a border around the Thumbnail image indicating that it is a link (a border is the preferable method), click on it to see the original large .jpg picture and then use your "Back" button to return here. |
Images can be reduced and resized using a graphics program. Photographs usually work well. Illustrated or drawn images may get fuzzy detail when resized.Another example of changing the size of an image in your HTML code without actually "resizing" the picture was found on a former student's web site. She found an animated email icon she wanted to use, but thought it was too small and so she changed the size of it in her
< IMG SRC > tag. This is the result ---
Original .gif
WIDTH="50" ��� HEIGHT="50" |
Same .gif but student changed the
dimension of it in her HTML code
WIDTH="70" ��� HEIGHT="90" |
It is more difficult and time consuming to try to change the size of an animated image. Animated graphics are composed of a series of individual images that are used in succession to create the animation. To resize an animated graphic, you must separate these images and resize "each" one separately and then reassemble the animation.If you just try to copy and paste an animation into your graphics program and resize the graphic that you see without separating all of the images used for the animation, you are only changing the first picture in the series and will lose the animation.
Here is an example ---
Original .gif animation
WIDTH="277" ��� HEIGHT="205" |
Resized .gif animation
WIDTH="225" ��� HEIGHT="167" |
Incorrect resizing of animation
Only the first image in the series was resized and the animation was lost 
WIDTH="225" ��� HEIGHT="167" |
� 
Copyright is claimed by Otter Sites Web Design to the entire body of this collection, as an entity, and to the HTML code which presents it as a collection. Otter Sites has received expressed permission for use of public domain and other privately owned works on this web site.The content of this site, in part or in full, may not be reproduced, published, transmitted, uploaded, modified or distributed in any manner without Otter Sites prior written permission. Otter Sites Web Design is not responsible for material presented on third party linked sites.
