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="http://www.google.com/"><img src="google.gif" alt="Google"></a>

The 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 picture.
<a href="fido.gif"><img src="lilfido.gif" alt="My dog"></a>
If the big picture is very big (say, over 50K), warn people.

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.

1. Open LViewPro.
2. In the File pulldown menu, select "Open". Then it will let you browse in your directories for the image you want to work with.

   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 over.

3. Crop the image if necessary. Look in the help menu to find out how.
4. The next step is to reduce the physical size in pixels of the image. Some people try to use the HEIGHT and 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.
   1. 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.
   2. Make sure there's still a black dot inside the circle where it says "Preserve aspect ratio".
   3. 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 colors.
      Next 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.
   4. Use the slider bar to reduce the size. Click "OK".
   5. 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.
5. 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.
   1. 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.
   2. If "True Color Image" is selected at the top, change it to "Palette Image".
   3. 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.
   4. 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 256.
      • If your original is a JPEG, you can try 256 colors. If it looks awful in 256 colors, undo, and skip the next step.
   5. 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.
6. In the File menu, pull down to "Save As" and give it a new file name.
7. 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.
   1. Make sure you have saved a decent copy with a new file name, as just mentioned.
   2. Then go to the File menu, and pull down to Properties.
   3. Click on the tab for JPEG (Normal).
   4. Check the box for entropy optimization.
   5. 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.
   6. "Save As" . . . and give it a new file name.
   7. 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, you're done.

For an outside opinion on "better thumbnails" from the design perspective, see Jakob Nielsen's Alertbox column for November 1996, Marginalia of Web Design.

Elizabeth T. Knuth's Home Page | ObComputing Directory

Comments to: eknuth@unix.csbsju.edu