Loading web images can take a long time and is especially slow over a modem. It is best to reduce the loading time as much as possible.

Important techniques include:

• Make your images as small as they can be and still be effective. All other things being equal, an image that occupies 5 square inches loads twice as fast as one that occupies 10 square inches

• Reduce the number of colors to the minimum without compromising the image. Many "logo" or cartoon type images contain very few colors anyhow. Reducing the number of colors dramatically cuts the size of GIF files. PhotoShop has excellent tools for reducing colors and displaying the results (in particular, if you click on MODE > INDEXED COLOR in PhotoShop, you can save your image in 2 thru 8 bit color and save it as a GIF file).

• Understand the differences between JPEG and GIF images: if an image consists of solid colors, as in a logo or cartoon, you should save it as a GIF file -- the resulting file may be compacted by a factor of 20-30; on the other hand, if an image is a photograph, then you should save it as a JPEG file as it will be much more compact than the equivalent GIF file. Also, any image that contains text or fine lines should be saved in GIF format, as JPEG format badly smears text or fine lines.

• Use thumbnail images to preview large images. After all, a picture is worth 10,000 words (the original Chinese quote) so a thumbnail must rate at least 1000. The best way is to make your thumbnail a clickable image with the size of the full scale image printed next to it. For example, suppose you have a full size image in a file named net001.gif and a tiny thumbnail version of it in a file named netthumb.gif located in a sub-directory above the one that contains this HTML code. Then the following code displays the thumbnail image and lets you click on it in order to display the full size image, whose size is 7 Kbytes:

  <A HREF="http://staff.washington.edu/larryg/Image/net001.gif">
    <IMG SRC="http://staff.washington.edu/larryg/Image/netthumb.gif"
  ALIGN=CENTER>
  </A> 
  < CODE> (7k) </CODE>
  

  (7k)

  This is particularly important if you present people with a large catalog of thumbnails from which to choose.

• A related technique combines the thumbnail approach with cropping. That is, if you reduce an image beyond a certain level, the viewer may not be able to identify it. But if you reduce it a moderate amount and then use a cropping tool to preserve only the most salient parts of the image you can dramatically reduce the file size while preserving its identify.

• Be careful with textured backgrounds: it is best to use light colors and muted texture otherwise the background clashes with the information you are trying to display

Course Topics

Graphics Design Based on Edward Tufte's Principles

Setting up your First Web Page

Acquiring Graphics From the Web Itself

Acquiring Graphics from Scanners and Digital Cameras

Graphics File Formats and Graphic File Conversion

Efficient Graphics

Colors, Backgrounds, Transparencies

Creating and Modifying Graphics Using Software

How to Do It