Saturday, February 15, 2025

So You Want A Thumb-Nail Image, Huh?

…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
]

 

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured