Using images
Use sensible alt text
Alt text is the accessible version of an image, and is used by browsers that cannot display images (such as those for users with disabilities). Careful use of alt text is very important, and is fairly easy. See the images section of my HTML tutorial for more details.
Try to limit your use of images
If it takes over 30 seconds to load over a regular modem, you should consider cutting the size down. Mobile devices typically have very slow connections, and in several parts of the World, particularly in rural areas, users are stuck with modem connections. Remember that several small images take longer to load than one big one because they require more open connections.
If you are going to write using images, consider using text instead because text takes far less time to load, even if it doesn't look quite so nice. You can then use various CSS features (including Web fonts) to make the text look the way you wanted, while significantly reducing the bandwidth required. What you can do when making menus from images is use just one image behind every link, and then write the text over the top. That way, they only have to load one background image and a few words of text. CSS makes this easy.
If you insist on using images instead of text, restrict them to logos, and nothing more. Paragraphs and headings are always better as text, since they allow the browser to use its proper text handling and text based navigation, they are more accessible, and they allow proper integration with accessibility software.
If you want to use images so that things will change when you hang the mouse over them, try using the a:hover pseudo-class available with CSS. You can use this along with the background image.
Count your colours
Note that some Internet services limit images to 256 colours (AOL is one example, but some mobile proxies also do this). If your images are needed to convey essential information (hopefully they are not), you should consider using the colours optimised for 256 colour monitors. It is known as the Web optimised or standard palette, and you should find your image editor (if it is any good) will allow you to choose to use the standard palette. Note that an optimised palette is not the same thing.
Choose an appropriate background
If you are using images as a background, make the background colour similar to the colour of the image. The classic example of this is a white background with white text and a dark image as a backing. If you browse without images to increase browsing speed or have a browser that cannot use images as a background, you cannot see the text.
Last modified: 15 February 2011