Clickable Thumbnail Images
WHAT ARE THUMBNAILS?WHY USE THUMBNAILS?HOW TO MAKE THUMBNAILSFASTER, EASIER METHOD |
Clickable Thumbnail Images
WHAT ARE THUMBNAILS?WHY USE THUMBNAILS?HOW TO MAKE THUMBNAILSFASTER, EASIER METHOD |
Assuming that you now have your images safely
stored away in your directory lets start with the first image. Of coarse this image could be named anything but I will call it "picture.jpg" for the sake of this tutorial. You will need the URL of "picture.jpg". I prefer to put it in cut/copy/paste by clicking to view the picture
from the directory then use the "go-to, show last"
method to get the URL. Unfortunately this does
not work with all servers so you may have to
enter it manually in the next step.
Remember your picture is still safe in your
directory but we are going to use it's URL to
make a copy of it for our thumbnail image. There are several utility tool sites on the web you can use for this but I am only going to describe the sites and methods I use here. There are two steps involved in this process as I have
mentioned before. We need to shrink the size of
the image and we need to reduce the file size.
Shrinking the image size first will make the
second step easier so let's go to Webfx at
http://www.newbreedsoftware.com/webfx/. click the pulldown where it says "NO EFFECT" and
scroll down to "SHRINK" and click. Next set the
intensity to HIGH. Below that enter the URL of
the picture. Don't worry about the background
color as you won't be using it. To the right of
that click on the "Apply Effect" button.
When the results page loads, if everything has worked right, it will display your picture at a reduced size and show the dimensions. Click on the image and use "go-to, show last" to get the temporary URL of the new image and save it in cut/copy/paste with CMD+A and CMD+C, then hit
your back button. Below the image is another URL
entry field. It will usually be displaying the
URL previously used. Delete this URL and paste
the new one you just got into the box then click
Apply Effect again. This will reduce the
image even further. On the results page check
the size of the image. You are looing for a size
of roughly 90x90 or something close to that. If
you need to reduce further just repeat the last
step by clicking on the image to get the 2nd new
temporary URL then the back button, then delete
the old URL and paste in the new one. If you
only need to shrink a little more yo might want
to change the intensity to MEDIUM or LOW and
remember if you make a mistake or don't like the
results of your last setting you can use your
back button to go back a step or two and repeat
the process. When you have your image properly
shrunk to the right size, click on it and grab
the URL from your "go-to, show last" and save it
in cut/copy/paste. Now on to the second step.
We now have to "optimize" the image to reduce the file size. Go to Net Mechanic's Gifbot at http://www.netmechanic.com/GIFBot.htm. Paste the URL that you saved at Webfx into the URL box. Don't forget to delete the "http://" that is in there first or you will have two of
them when you paste the URL and it won't work.
Next select Gif output only. Under that
is a box for your e-mail address, you don't need
to enter it, just leave it blank since this
picture will be going back to your file directory and not into your e-mail. Click the OPTIMIZE button. The next page will give you choices of varying degrees of file reduction as you scroll down the page. Each choice will show you the image at that reduction level. Note that when you "mouse over" (place the yellow click box over the image) you will see your original image and not the optimized one. This allows you to compare the original against the optimized one. This is also one reason that we reduced the image size first so that you can move between two different output images on your screen. On the left of each image will be shown the file size
for that image. Choose one with a file size as
small as possible without giving up too much on
the color and definition. This will usually be
found in the range of from 1000 to 3000 Bytes but
absolutely not more than 5000. The larger this
file size is, the longer your page will take to
load. Remember, this image is just being used as a link to the real picture. When you decide on an image, click on it. On the following page scroll down once and click on the image again.
It is now ready to be transloaded back to your
site as a "gif" image. If you have put a
transloader on an F# key you can just hit that
key and the URL from Gifbot will be entered
automatically. If not then you'll have to use
the "go-to, show last" and cut/copy/paste method
to get the temporary URL from Gifbot into the
transloader or Freeloader. Give the image a new
name in the transoader. I like to use a similar
name for both the picture and the thumbnail for
easier coding in the html so if my picture had
the file name of "picture.jpg" then my thumbnail
of that picture would be named "picture-tn.gif".
Some servers won't allow you to use a hyphen so
the file name might have to be "picture_tn.gif"
or "picturetn.gif". Using images as links will
be covered on my HTML page but for your
thumbnails just to finish this page off properly
here are the codes you would use to place the
thumbnail on your page as a link to the big
picture using the file names from the above text:
I said at the beginning of this page that you could have the larger picture any size you want but as you can see in the codes, there is no place to put length and height attributes for the big picture. You can still do this one of two ways. One way is to take the URL of the big picture to Image Magick or other site where you can resize it. This will, of coarse, increase the file size and cause it to load slower. The other way to do this is to make an HTML page for each image. Use the first one as a template to make the rest of them. All you need on the page is the following: <HTML>
If you use this method of sizing your pictures then the link on the thumbnail image should point to the HTML page instead of the picture file.
This process and use of the utility sites described may sound more complicated than it actually is. Once you have been to these sites and used them you will find that they are very easy to use once you've gone through it once or twice. Feel free to experiment with them and don't worry about harming anything. All you can loose is your time.
WHAT ARE THUMBNAILS?
Thumbnails or thumbnail images are the small postage stamp like pictures used on webpages as a link to a larger image. They are often seen on clipart or graphic sites used for displaying background images although this is not always the case. You will also find them used in your Webtv favorites folders. A thumbnail image is not just the larger image reduced in size with height and width attributes in the image tag, they are an entirely different image using a different file name. If large images were used for a page of thumbnails and simply reduced in size in the image tag, the page would take forever to load and may in fact fill the viewers cache before loading is complete. The file size for the thumbnails must be reduced by up to 90% to allow the page to load properly.
WHY USE THUMBNAILS?
If you want to display a series of images on your page and have more than four or five of them then you might want to use thumbnails. These can be photographs, cartoons, background images, banners or any graphic file that works with your browser. For Webtv these file types are GIF and JPEG or just JPG for short. When your visitors click on the thumbnail image they will see the full size image with higher resolution and better color. These larger images can be formatted to be the same size as your screen if you wish so there are basically two advantages to using thumbnails instead of just putting the pictures on your page. One is that your page will load faster and the other is that your visitors can get a larger and better picture to see. Examples of the use of thumbnails can be seen on the Inside the Microchip page on my Variety Site.HOW TO MAKE THUMBNAILS
The whole idea of using thumbnail images is to be
able to put lots of pictures on one page and
still make the page load in a reasonable amount
of time. To do this we want the images to be
small in size and at the same time have a small
file size. The first step is to upload the
images we want to use on the page by either
transloading or uploading as described on the
previous pages. If your site supports
subdirectories then it will be to your advantage
to put all of the images in an image
subdirectory. These will be the pictures that
the thumbnails will link to. They can be made to
display in any size you want, I'll cover that
later on this page.
<a href="images/picture.jpg">
<img src="images/picture-tn.gif"></a>
<BODY>
<IMG SRC="image/picture.jpg" WIDTH=500 HEIGHT=370>
</BODY>
</HTML>