So You Want A Thumb-Nail Image, Huh?

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:

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.

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.

Loading Comments...

Web Development Newsletter Signup

Advertiser Disclosure:
Some of the products that appear on this site are from companies from which QuinStreet receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. QuinStreet does not include all companies or all types of products available in the marketplace.

Thanks for your registration, follow us on our social networks to keep up-to-date