Images on web sites: when should they be used?

Images on web sites: when should they be used?

by

Tim North, http://www.scribe.com.au

Images are used on web and intranet sites for many reasons: branding, highlighting, navigation, providing supplementary information, division, humor etc. Images consume more space than text, however, and thus take a longer time to download.

On an intranet, this additional time is usually within acceptable limits. On the web, however, where many people are limited to the 4-5 KB/s speed of a modem, images can cause long and frustrating delays.

It follows that we should thus limit the unnecessary use of large images. For example, a page that totals 50 KB (including text and all images) may take over 10 seconds to fully appear when viewed over a modem connection. It should be noted that readers in areas not well served by Internet connections (e.g. rural areas) may experience much longer delays.

Many users express great frustration at such delays, particularly if they judge that the content was not worth the wait.

Here then are some guidelines for the use of images:

1. When writing for serious-minded, information-seeking readers, we should ensure that all graphics on our pages are relevant to the content. Graphics that add nothing are a waste of time for these readers.

2. Limit the total content of most pages to no more than 50 KB. Keep in mind that even this much may take over 10 seconds to fully appear.

3. If you need to include a large image, display a thumbnail-sized image instead, and link this to the larger image with a message such as 'Click to view the full-sized (200 KB) image.'

4. Minimize the use of animated GIFs (images that endlessly cycle through a short animation.) Not only do these appear garish (and frequently annoying), but they are larger than still images and thus slower to appear.

5. Photographs will generally be smaller (and look better) if saved in JPG format. Cartoon-like images, will generally be smaller (and look better) if saved in GIF format. PNG (ping) format is superior to both, but has not yet achieved wide acceptance.

6. Provide ALT text for all non-trivial images; that is, a textual equivalent that is used if the browser does not (or cannot) display the image.

7. Most images will be more useful if accompanied by a caption. If you can't think of a relevant caption, this may be a sign that you don't need the image.

Armed with these tips, your pages will load quickly and will be well regarded by your visitors.