Web Log Costa Blanca

I have one or two original ideas about alt text, but let’s start with the basics.

Firstly, you have to have it. If you don’t have an alt attribute for every image on your Web page, you won’t be producing valid HTML. It won’t validate. Worse, you will be depriving a large number of your visitors, who may be blind or colour-blind or have other visual difficulties. They will not get value from your page.

Secondly, it should provide the next best thing to the image itself. If an image is of something beautiful, for example, you should try to convey that beauty in words. Don’t say

alt="tree"

Say

alt="A cherry tree loaded with pink blossom, glowing
against a clear blue sky"

Similarly, if the image communicates meaning. Spell out the meaning in words. (And if it’s purely decorative and otherwise redundant, should it be on your page at all?)

Of course, we don’t often find the time to do this properly. We’re in a hurry, and want to get on to the next page on the site. And here I must hold up my own hands. I will spend hours getting a page layout right—but not give a few minutes to thinking of really useful alt text. (I mean to do better. I really do…)

Anyway, a couple of tips.

1. Provide a title tag, too, if you don’t want Internet Explorer to display your alt text as a tool tip. An empty string is often useful here—or a single-word caption.
2. Try beginning and ending your alt text with brackets, so plain text browsers like Lynx make it clear it’s not a continuation of other page text. Using the word “Image: ” straight after the opening bracket is often a good idea. So your actual alt text will be something like “(Image: a cherry tree loaded with pink blossom, glowing against a clear blue sky)”

That kind of thing.

There is so much to be said about images on Web sites, and on Web pages. (Two different issues already.) So I thought I’d start with something absolutely basic.

All graphical Web browsers will resize images for you. (Text browsers ignore them; if there is ‘alt’ text, they either display that or read it aloud. I’ll get on to that in the next post.) They will display images with the width and height you specify inside the image tag, whatever the size of the image sitting on the server—the one you uploaded.

This looks like a really helpful feature. (It seems to be taken advantage of by Microsoft Word, when it creates Web pages from Word documents.) However, you should never use this facility. The browser will upload your big images, perhaps at print-ready resolution straight from your camera, before it resizes them. So your page will take forever to load.

You may not notice this yourself, as the site owner/designer, because your browser will cache the big images on your own hard disc. Your pages will come up as fast as you like. But every visitor to your site, even if they have a fast broadband connection, will wait unnecessarily for the browser to upload the pixel-bloated monsters before cutting them down to Web size. They may well go away before the page has finished loading. (I almost always do.)

What you need to do is decide how big you want your images to be on the Web page, and cut them down to that exact size yourself before you upload them to your site. Any photo-editing or image-editing program will do this for you, and there are plenty of free ones available. Many digital cameras and scanners come with a disc which has such a program on—or you can download one from the Web.

All your visitors will be happier and—since they will stay on your site—so will you.