Graphics on the Web

Thumbnails

There are several reasons for using thumbnail images on a Web page including:

  1. to create a menu of images for the viewers to choose from
    (an image-mapped collage could also be used for this purpose. See image maps)
  2. to give viewers an example of an image without making them wait for the full-sized version to download. Then, by making the thumbnail a link to the larger version, you give viewers the option to look at the larger image.

Example menu of linked thumbnails (each thumbnail links to a larger version of the image on its own Web page)

Some important points to remember:

  1. If using thumbnails, always create a special thumbnail version of the graphic. Don't create the thumbnail just by resizing the original graphic in your HTML editor. (Resizing a graphic in your HTML editor will not change the file size and download time of the graphic.)
  2. Make sure you set the BORDER attribute to zero on any thumbnail you use as a link. If you don't, the image may appear with a colored border (just as text used as a link appears underlined.)
  3. Even though it is possible to link directly to a JPEG or GIF file (an example), avoid doing it. You have no control over the presentation of the image. Always place an image in an HTML file and link to the HTML file so you can present the image with an appropriate background color, text, etc. (A better example.)

Graphics Checklist