Teaching & Learning Technology Development Center

Images and the Web

Thumbnails versus Full-Size


One design concern that you may be faced with, as a Web page designer, is how do you display multiple large (larger) images on a page. You have several design options to display this visual content without making the download time of the page a problem for the end-user. Of course you can ignore the download problem and mass all of the images at the full size on the page, but then you risk having the viewer leaving your page before all of the content has loaded. Today, most viewers are not willing to wait a long time (or even more than a few seconds) for all of your images to download! Or you could make the images small enough that the total of the page falls within the maximum limit of <60K, but then you run the risk that the visual content is too small to deliver the intended visual information. There are better methods of presenting the visual content that keeps the download time of the page to a minimum. Let's look at a couple of options.

More preferred options are:

  • Use text descriptors that are links to the images on another page(s)
  • Use scaled down versions of the images (thumbnails) as links to the full size images
  • Focus in on some detail of the image and use that as the thumbnail link

 

  Old Family Portrait 100K

This is an example of a text link to the image. This would be a way to referencing a long list of images without adding a lot of size to the page total; however, it doesn't give the viewer any visual reference to the image.

 

thumbnail of photo Old Family Portrait 100K

This is an example of a thumbnail and text link to the image. Here the viewer can get an idea of the visual content.

 

detail of photo Old Family Portrait 100K This example shows a portion of the image in a size that is better for viewing or it may be the focus of the image.

File Type | File Size | Thumbnails | Others | Photoshop
UW-Eau Claire Home
About Teaching & Learning Technology Development Center
Gene Leisz (leiszgj@uwec.edu)
Updated: August 28, 2003