Proper image tag coding

Whatever user-friendly authorship tool you select, somebody needs to make sure it codes image tags correctly, whenever someone inserts a graphic on a page.

1. Every IMG tag should include WIDTH and HEIGHT attributes, with the correct dimensions, in pixels, of the actual bitmap graphic.
2. Every IMG tag should include a meaningful ALT text attribute, which describes the hyperlink if the image is a link, or describes the image if it isn't.

Many HTML editors already follow Rule #1, which is good. Ideally, whenever you insert a graphic, the editor should also prompt you to type in ALT text for the IMG tag, as well. If not, you may have to go into the code and insert it manually. Here's an example IMG tag:

<IMG SRC="widget-b.jpg" WIDTH="100" HEIGHT="75" ALT="Type B widget">

Dreamweaver follows Rule #1 automatically every time you insert an image, and if you keep its Property Inspector window open, for images it always presents the ALT text attribute to be filled in (but doesn't require it). For more on Dreamweaver see my WYSIWYG HTML generators page.

An exception to Rule #2: extremely small images of limited significance, such as tiny bitmaps used for list buttons and cutesy divider graphics used instead of the horizontal rule tag (if you just gotta). But I think even the IMG tag for a tiny NEW glyph should have ALT="NEW". At the very least, any images used for site navigation need ALT text: if you have a "Home" button, it must always have ALT="Home" in its IMG tag.

Here's why:

• WIDTH and HEIGHT attributes let browsers plot your page faster, always. When a browser is plotting a page and hits an IMG tag, if the dimensions are given in the tag, it can immediately draw a placeholder frame and keep right on plotting. If not, it has to wait until the graphic-file header shows up to get the dimensions. It may not plot anything past that IMG tag until that happens; or it may throw in a "missing image" icon, and have to go back and re-plot the whole page.
• Web tools for the visually-impaired use the ALT text attribute, if present, in place of the graphic image.
• Many sighted users at times turn off automatic image loading for faster surfing. When image loading is off, the browser will normally display a placeholder frame for each graphic (using the HEIGHT and WIDTH dimensions) with a "missing image" icon and the text from the ALT attribute inside the frame. The ALT text lets the user decide whether to follow image links, or load individual images if the browser supports that.

When ALT text is visible in the browser, either because you have image loading turned off or because your Internet connection has choked, the ALT text displays using the font and size inherited from the containing tag. When the image dimensions are small, you may want to have a look and see what fits, and perhaps shorten your ALT text string accordingly. In a few cases you may even want to add an inline style to the IMG tag, just to squeeze down the font size of the ALT text.

I like to add the file size of the graphic to the ALT text, like this:

ALT="Type B widget (6K)"

Netscape used to support loading individual images while general image loading was off, and this gave more information for deciding individually. Even without individual image loading, this info can be nice for deciding whether to toggle general image loading back on, and it only adds five or six bytes.

If you use the Firefox browser, the 5K imagepref extension lets you toggle image loading with a check box in the status bar, which if nothing else lets you see the ALT text displayed.

top