Go back

"What program do you advise for making thumbnails of my images?"

Answer: there are many good programs that will do that for you, like Thumbsplus and I-view. But for those who, like me, prefer to do as much as possible without extra programs, Paint Shop Pro is an excellent tool! The only thing you'll have to add is the HTML code needed to show the original on your website!

First open your original image.
I've sized it down a bit for this tutorial, but the original size is 618 x 370 pixels, way to large for your web-page to load in an acceptable time if it were placed there 'as is', together with some of your other works... So let's make thumbnails for an index page!
Do shift-D to copy, and then close the original: we don't want to spoil that, do we?
On the copy, do menu>image>resize

In the 'resize' options, enter the size you want your thumbnail to be (I prefer somewhere between 75 and 125).
Play with the Resize Type! One methods will work better for an image than another, and you can just Ctr-Z again and again until you're satisfied with the result!

Now hit OK

And here's your thumbnail! All you have to do now is put it in your web-page!

I take it you know how to include an image in a page, but I'll refresh your memory here. The code is

<IMG SRC="yourpic.ext" WIDTH="xx" HEIGHT="nn" ALT="mypic">

where SRC is your thumbnail image, WIDTH and HEIGHT are the size of it, and ALT is the text to show in browsers that don't show pictures. So, for my thumbnail, the code is:

<IMG SRC="thumbs4.jpg" WIDTH="125" HEIGHT="75" ALT="thumbs4">
whick will result in this:


Now al you have to do is make this thumbnail into a link, that will open the original!

My original image's name is 'thumbs0.htm' (OK, I know, my name-giving lacks in originality!). That would result in an anchor like:

<A HREF="thumbs0.jpg"><IMG SRC="thumbs4.jpg" WIDTH="125" HEIGHT="75" ALT="not my most beautiful one!"></A>

not my most beautiful one!

Just check it: if you hover your mouse over it, it'll show the
ALT-text, if you click it you'll see the original image I linked to!

If you put a collection of these links in a nice table, you'll get a gallery like the one I present my own graphics in: why not take a look there and view the HTML source of that page in your own browser: that's the way I learned most of my HTML !

Go back

© Fried Kampes, Randwijk - the Netherlands, 1999