Style guide for online hypertext

Document style: Using images & icons

Images are used for a variety of purposes in HTML documents, but the most popular ones are logos and navigation icons.

In all cases, it is important that images are small. On the Web, an image might be worth a thousand words, but it often costs more than a thousand bytes. Because of the extra delay in loading they introduce, only add images that are essential to the document, and make them as small as possible. And even for essential images, make sure the document still "works" if they are not loaded. Readers on the other end of a slow link will most likely not load any images at all. The ALT text is the most important tool to achieve this.

To make the documents render faster, include the WIDTH and HEIGHT attributes on the IMG element. These attributes indicate the width and height of the image, which a browser can use to draw a box of the appropriate size. It can then continue rendering the rest of the document, and load the image inside the box later. It also makes the calculation of table appearance easier.

If you want to provide large images, then use small thumbnails. They allow a user to get a preview of the image quickly. This is especially important if a document contains a lot of images, as in a gallery. If an image is essential to the text, then inline it, but also add a link to the image itself, so people who do not load images by default can still explicitly load this particular image easily.

Following the notes on document size, keep the size of document and inline images under 60 kilobytes total whenever possible. It is strongly recommended that you put all images in a separate directory, so that all documents can refer to the same images. Since images are stored in the browser's cache, they can be re-loaded from there for every document after the first one.

Logos

A logo is often used instead of a header to make a better impression. They typically include the name of the subject of the page, and some graphical logo. As long as you keep the image small, and use a sensible ALT text, this is perfectly acceptable. In addition to the notes on ALT text below, make sure the ALT text replaces the logo text. "Company logo" is hardly a replacement. "The XYZ Company" is. If you also include the image in a header, the alternative text will even stand out when the document is viewed with image loading off.

Icons

Icons are a good way to make it more obvious how to navigate the site. They stand out against the text, so the links are easier to spot. Of course this only works if the icons are consistently used on the site. Make sure all documents use the same sequence of icons, with the same text and to the same logical destination. Eg., an icon labeled "Home" should always go to a document that serves as "Home page" for the current document. When the user is reading a document that occurs in the toolbar, replace the icon with a non-linked version so the "look" stays the same.

Make sure the meaning of an icon is obvious, and add effective ALT texts. There are several "standard" icons for navigation. Use these as a basis for your icons to make it easier to identify the meaning of the icon. A magnifying glass, for example, is commonly used to indicate an interface to a local search engine.

For large navigational images, a good technique to reduce loading time when some information on the image changes is to split it up into several small images, each for each part. If the images are loaded, they are put next to each other and should provide a seamless view.

Use a sensible ALT text

The ALT attribe on the IMG tag specifies a text to be displayed when the image itself isn't loaded. It should replace the image's meaning and not be a description of the image. In no case should it contain instructions on how to load images!

Due to various reasons, the ALT text is rather limited. It cannot be longer than 1024 characters, and it may not contain markup. This sometimes makes it hard to create an acceptable alternative text for the image. However, the IMG tag itself may be enclosed in HTML markup, and the ALT text then "inherits" this markup when displayed. Use the proper HTML tag to mark up the image as if it were text. For example, if the image serves as the main header for the document, use <H1><IMG SRC="logo.gif" ALT="The XYZ Company"></H1> in your document. This either results in the company's logo, or the name displayed as a level-one header.

Alan Flavell has written an excellent discussion on choosing good ALT texts for images.