[111Design.ca]

111Design Consulting

Supporting Industry Standards and Accessibility [Navigation]

Menu

[toxic waste]

design tips

You are here:  Design Tips » Images

tip#9

Images

Don't use graphic bullets and dividers. The more images there are on a page, the longer it will take to load. There's no harm in using them for list markers so long as it's done with CSS. Lists should be marked up properly with ul, ol, or dl tags.

Horizontal rules can be styled directly with CSS (for Internet Explorer) or wrapped in a div for Mozilla and Opera. The hr tag was designed to expand and contract with the size of the viewport... something an image cannot do. A nice graphic divider may fit your screen but force horizontal scrolling on someone else's.

Don't overuse animated gifs. One or two small ones, preferably near the bottom of the page is fine. But large ones flashing and dancing all over, or worse, as a page background (!) are just tacky and irritating. Please be considerate. Screen movement—flickering or flashing at certain frequencies, can trigger a migraine headache or a seizure in some people.

If you want your designs to look professional, too many animated things screams, "I learned Web design back in 1996 and have not bothered to ugrade my skills". Seriously, if you simply must have animation, use a mouse-over effect instead. This is only activated when the cursor is hovered over it. Because the user can turn it off (by moving his mouse), it's perfectly safe to use an animated gif for the second image. Mouse-over effects do not require the use of javascript. This can (and should) be done with CSS.

Do use the alt attribute for all images. Alt text should be descriptive of the image—not the target URL should the image happen to be a link. alt text was meant to be displayed if the image itself doesn't load. Mozilla-based browsers *don't* provide a tooltip like Internet Explorer does. You *only* see the alt text when the image doesn't load, or if you right-click and view Properties. As for image links, people like to know where they are going (or what's going to happen) when they click on things. So include the title attribute in the a href tag. Also avoid using text like "Click Here". That says nothing about the image *or* the link. Not everyone uses a mouse to "click" with either.

Alt text is mandatory. Refer to the W3C guidelines for HTML 4.01.

When Lynx (a text-mode browser for Linux) encounters an image with no alt text, it displays some text instead: [inline]. Same goes for one pixel transparent gifs. But that's another story. If the image does not require a description, use: alt="". This will ensure nothing shows up. WAI Priority 3 checkpoint, however, will scold you for doing this. If the image is a decorative divider or a bullet, use an asterisk (*) for the alt text.

Don't use graphics to convey important information. Graphical text cannot be resized. It cannot be rendered on a text-mode browser; read by an aural browsing device like JAWS, or seen by Search Engine spiders. Unless the alt attribute is used, and used wisely, there might as well be nothing there. If your Site has graphic headings, put them inside the appropriate heading tag (h1-h6) and make the alt text the same as what's on the graphic. Don't use alt="graphic header" or something equally dumb. This is a rather extreme example, but I once came across a Site that used images for every bit of text on every page. Paranoid about people stealing their content, I guess. And of course there was no alt text to be found. There was, however, a large chunk of hidden "tiny text". Keywords to trick Google into indexing them. They were later banned for spamming.

Do include the dimensions for all images. Including the height and width attributes in the img tag does more than conserve bandwidth. It instructs the browser what sized place holder to display if, for some reason, the graphic doesn't load. You should not, however, rely on images to hold a layout together. Some people surf with image-loading turned off! Use CSS for the layout, not tables.

Crop images to the smallest size possible and don't downsize large ones with HTML. When small thumbnail images are very slow to load, that's usually the reason why. You see, the browser still has to load the full-sized images, regardless of what dimensions it's been told to display! Depending on the user's browser configurations, images may or may not be cached. So there's no real benefit to doing this. It's best to make new ones with a graphics editor.

Copyright © 2003-2009, 111Design.ca