/tutorials/web_graphics/article.php/3480031/So-You-Want-A-Thumb-Nail-Image-Huh.htm So You Want A Thumb-Nail Image, Huh?

So You Want A Thumb-Nail Image, Huh?

By Joe Burns

...use these to jump around or read it all
[Offering Thumb-Nail Images]
[Offering Two Images]
[Offering One Image]
[A Final Thought On Images]

     If you've ever gone into a page that loads a bunch of large pictures, you know that it can get annoying. The pictures often are loading way off the browser window and it's difficult to really see it all in a glance. Here's where thumb-nail images come in handy. You offer very small versions of the pictures for viewers to click on so they can see the larger version. It makes for smaller, more easily viewed, pages. Plus it allows the viewer to be in charge of what he/she wants to see. There are two ways of going about it.

Offering Thumb-Nail Images

     If you have a "Photo Gallery" of favorite pictures you want people to see, I suggest you offer them one of three ways:
  • Offer Text This makes for the fastest load. Simply offer text descriptions of the pictures with a link to them. I do that with my image pages. (Most people won't like this suggestion)
  • Offer Two Images You will offer a smaller version of the picture, or a detail of the picture, for people to click on to see the larger 2nd image.
  • Offer One Image This is the best, and fastest loading method. I will explain the last two methods below.

Offering Two Images

     This is the way I see most thumb-nail images set up. You offer two images. One smaller to act as the thumbnail that is attached to the larger. Like so:

<A HREF="paperboy.gif"><IMG SRC="pb1.gif"></A>

     Notice this is a simple A HREF link with an IMAGE command as its link words. See Primer #5 - Images for more on making images links. The smaller image just links to the larger. You can also get rid of the blue border that appears around the link image by entering BORDER=0 inside the IMG command just before the SRC portion.

It looks like this: Click to get the whole picture.

     The downfall of this method is that it requires two images to load. The first is the thumb-nail image and the second is the larger image. This takes time obviously...and hard drive space.
     On the up side of the equation, you can offer only a detail of the image. If you clicked on the thumb-nail image above, you saw the larger version. It was much more than what I offered in the smaller picture.

Offering One Image

     This is my preferred method of offering thumb-nail images. What you do is offer the same image as both the thumb-nail and the larger image. This is done though the same link format as above except, you make the link to the same image that is being offered as the thumb-nail. The thumb-nail is created through the use of HEIGHT and WIDTH commands.

It looks like this:

<A HREF="paperboy.gif">
<IMG HEIGHT=50 WIDTH=50 SRC="paperboy.gif"></A>

And here is what you get:

     Remember that when you are resizing an image using the HEIGHT and WIDTH commands, you are denoting pixels per inch, not any kind or percentage. There are no hard or fast rules to this - you may have to simply play around with numbers until you get the size you want. That's what I did here.
     Notice how much faster the one-image method loads. The reason is the image that the viewer will receive is already loaded into the browser's cache. (A cache is a small section of the hard drive where browsers keep images and pages while they display them) The image appears much quicker because you are not bringing up a whole new picture, you're just offering the same picture at the normal size. It just pops up onto the screen. This is the better way of doing it.

A Final Thought On Images

     Images are great, no doubt, but remember that the majority of people surfing the net are still dial-up users running 14.4 and 28.8 modems. Pages will load only as fast as your server gives and the modem accepts. Here are a few tips:

  • Be kind. Offering a 100K image in JPEG format will take upwards of a minute to load at 28.8. Go as small as you can.
  • Use .gif format for icons and small images.
  • Use JPEG for larger and more detailed images.
  • Go for content not flash. A page with 30 images, java, and animation is impressive, but so is the ability to put three billiard balls in your mouth at the same time. Both get old after a while.

[Offering Thumb-Nail Images]
[Offering Two Images]
[Offering One Image]
[A Final Thought On Images]


  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date