Making Thumbnail Images for Web Pages
A "thumbnail" is a little picture that gives people the
general idea of what the full size picture will look like. They're
"clickable" pictures, and when you click on them, it takes you
to a bigger picture.
Using a graphic for a link is just like using text for a link. It
would look like this in your markup:
A HREF is where you want the link to point to.
Then, instead of text, you use an image inside the anchor. The
ALT text is there for non-graphical browsers. People who
have images turned on will see the image as a link. Text-only
browsers and some people who have images disabled will see the
ALT text instead.
To do a thumbnail, a little picture points to a bigger
src="lilfido.gif" alt="My dog"></a>
If the big picture is very big (say, over 50K), warn
To do this, you need two versions of the graphic. One is full
size, and you might already have it. The other one is the thumbnail,
and you make it by editing the full size picture.
I will use LViewPro as an
example, but you can find out how to do the same things in IrfanView or Paint Shop Pro
by opening them up and looking in their "Help" section.
- Open LViewPro.
- In the File pulldown menu, select "Open". Then it will
let you browse in your directories for the image you want to work
If you make a mistake anywhere in this process: There is
an "Undo" button on the upper right of the toolbar, second
from the top. You can also get "Undo" from the Edit pulldown
menu. You can use Undo to cancel the last edit you made and start
- Crop the image if necessary. Look in the help menu to find out
- The next step is to reduce the physical size in pixels of the
image. Some people try to use the
WIDTH attributes to do this, but this doesn't always
"work". And even when it does, people are still forced to
download a full-size GIF or JPEG even though you fool some
browsers into thinking it is physically smaller.
- On the toolbar and also in the Edit pulldown menu, there is an
option to "Resize". On the toolbar, this is on the left side,
about a third of the way down, and looks like a square with two
smaller squares inside it in bullseye fashion. Pick this. A little
dialogue box will pop up, with slider bars.
- Make sure there's still a black dot inside the circle where it
says "Preserve aspect ratio".
- Above the slider bars is the current size in pixels. The first
box is the width, and the second is height. If the image is big
enough, you will see the same information in the blue title box above
the image. E.g., MYLOGO.GIF (355x105x256) means that
mylogo.gif is 355 pixels wide, 105 pixels high, and uses 256
to the slider bars, on the right, is the ratio in terms of the
original, in case you ever need to work with percents. 1.00 is
100%, 0.75 is 75%, etc.
- If your original image is too big, you will have to
go through this process twice. How big is too big? Over 500 pixels
or so. MSN TV will squish (and distort) any image that is wider than
this. Older Macs will get an ugly horizontal scroll bar if your
picture is wider than this. If the image is in a table, be advised
that MSN TV does not have horizontal scrollbars--so the right-hand
part of your table will be completely inaccessible if it is too wide.
Start with the original when making both smaller images, because a
copy of an original will have better quality than a copy of a copy.
- Use the slider bar to reduce the size. Click "OK".
- See if you like how it looks. If there are funny patterns
(moiré patterns, they're called) showing up in some areas, click
"Undo", and try making it just a hair smaller next time. For
a thumbnail, it's a kind of game to see how small you can make the
image and not have a grainy blob. Reduce the size as much as you can
and still give people an idea of the full size picture.
- Now the picture is physically smaller--or will be when you save.
The next way to reduce byte size is to see if you can reduce the
number of colors.
- In the Retouch pulldown menu, select "Color Depth".
You'll get a dialogue box with two choices at the top, several choices
for number of colors in the middle, and a checkbox for dithering at
the bottom. Leave the checkbox on/checked to say yes to dithering.
- If "True Color Image" is selected at the top, change it
to "Palette Image".
- Try checking 16 colors (Windows palette). Pick "OK".
What do you think? Remember, a thumbnail doesn't have to be as pretty
as the big picture, it just gives visitors the general idea.
Sometimes you can get away with very few colors. You might even
consider black and white.
- If you don't like the results, Undo.
- If your original is a GIF, we know it looks OK in 256
colors. So the number of colors we want is somewhere between 2 and
- If your original is a JPEG, you can try 256 colors.
If it looks awful in 256 colors, undo, and skip the next step.
- Try going up or down in multiples of 2. Use the button for
"Custom number of colors" here, and type in the number. If 16
colors looked OK, can you get by with only 8? If 16 colors was ugly,
are 32 colors enough? And so on.
- In the File menu, pull down to "Save As" and give it a new
- If your original is a JPEG, there is one more thing you can do to
reduce byte size, and that is to use a lower quality of compression.
- Make sure you have saved a decent copy with a new file name, as
- Then go to the File menu, and pull down to Properties.
- Click on the tab for JPEG (Normal).
- Check the box for entropy optimization.
- There is a slider bar for compression quality, from 20 to 95.
Higher numbers mean better quality of compression--but also larger
file size. Try setting this to halfway between the current setting
and the lowest number. Click OK.
- "Save As" . . . and give it a new file name.
- Examine the results. If tolerable, go back to your thumbnail
and try making the compression quality even lower. If it looks
horrible, go back to your thumbnail and use a somewhat higher quality
of compression for the next round. When you are using the lowest
quality of compression at which the thumbnail is still tolerable,
For an outside opinion on "better thumbnails" from the
design perspective, see Jakob Nielsen's Alertbox column
for November 1996, Marginalia of Web
Elizabeth T. Knuth's Home
Page | ObComputing Directory
Comments to: email@example.com
Making Thumbnails / Revised 6 January 2004 / © Copyright
2000-2004, Elizabeth T. Knuth / URL: