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.
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.
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.