There are several techniques that I currently suggest you use to minimise the bandwith impact of autoloaded (inline) images:

Adjust the physical size

Often an image does not really need to be as large as it is in order to convey the information (or visual stimulation) you are trying to achieve. Consider making the image smaller as it is displayed on the screen.

Use a thumbnail linked to a larger version

Using a full-sized inline image assumes that the reader of your page wants to spend the time waiting for the full-sized version to download. Why not allow them the opportunity to decide whether they want to see the full version or not?

Create a very small “thumbnail” version of your image for the “inline” (called into the document with the IMG SRC tag) graphic, then “wrap” the IMG SRC tag with an A HREF tag that links to the full-size image. Your thumbnail will then display with a blue line around it, and users will know that they can click on the thumbnail to see the full version. It is also good etiquette to let them know the size and file type of the full image (e.g., 110k GIF image) in text next to it so they can decide if it is worth the trouble.

Decrease the image resolution

When the image is scanned, it is normally saved in Photoshop in something like 300-600 dots per inch. However, computer monitors can only effectively display 72 dots per inch. What we have found is that saving an image as 150 dots per inch retains about as much quality as can be displayed on the computer, while saving a great deal of file space.

Image resolution can also affect the physical size as it is displayed, as a picture saved with 300 dots per inch resolution is automatically “blown up” by the display application (in our case Netscape or Internet Explorer) to allow it to be reasonably displayed on a 72 dots per inch monitor. So even though you may save the file as a certain physical size (say 2 inches by 3 inches) within Photshop, if the image resolution is high then the Web browser will display it much larger than you intend.

Decrease the number of colors/bits per pixel

The color value of each “dot” or pixel is stored in bits, with 8 bits being able to represent 256 individual colors. As storage bits are either added or substracted, the result is either a gain or loss in the number of possible colors that can be stored and depicted.

When you save an image in GIF format, it will as a default save 8 bits per pixel, and up to 256 colors. What we have found through experimentation is that often it is possible to get by with 50-75 colors without noticeable degradation, depending upon the picture. This then requires fewer bits per pixel to represent and therefore saves in storage size.

Use the JPEG format for images and the GIF format for text or line art

 The JPEG format will often provide a smaller filesize for the same or better quality picture. The GIF format, however, is best used for line art or text as it provides sharper color boundaries. Since both formats are supported as inline images in most browsers, you should select the image format that is best for the particular application.

Often you will find that replacing your GIF image with a low-quality JPEG will give better quality at a lower file size. However, you must begin with the original image – a GIF image retains only 256 colors, and is therefore already degraded to the point where a JPEG will not provide any better quality.

But if you save a copy of your original image in JPEG format you should see a substantial difference in image quality, file size, or both.

Have fun!

MichaelS