adrian holovaty

July 8, 2002, 12:14 PM ET

Spacer GIFs and ALT attributes

The latest tip in Mark Pilgrim's 30 days to a more accessible weblog series is to use an empty ALT attribute on spacer images so non-graphical browsers will ignore them.

In my mind, spacer GIFs, which are transparent 1x1-pixel images that some Web designers use to achieve precise positioning of elements on their pages, are a severe bastardization of what HTML was intended to be. Images are meant to add pictures and graphics to your Web pages -- not to push your text over 155 pixels to the right, to set up an adequate margin. (That's what style sheet properties are for.)

But aside from that argument, spacer GIFs have a terrible effect on text-only browsers. (This is Mark Pilgrim's main point.) Since a text-only browser can't display images, it displays the ALT (alternate) text for images in their place. Thus, a page with lots of spacers might look like this in a text-only browser:

[spacer][spacer][spacer]
[spacer]
[spacer][spacer][logo]The Anytown Daily News
[spacer]
...

Not pretty. If the above example had used blank ALT attributes, all of those annoying [spacer]s wouldn't have shown up.

I examined the code of several large newspaper Web site home pages to see how rampant spacer GIFs were. Here's the bad news:

nytimes.com used 103 spacer GIFs, all without ALT attributes. I visited their site with a text-only browser and was met with an ugly sea of [spacer]s. It's clear that text-only browsers are not welcome at The New York Times.

washingtonpost.com used 36 spacer GIFs -- significantly fewer than the Times, but worse, for the following reason: Each spacer image was specifically designated as ALT="spacer". If they cleared these ALT values, they'd make their pages look a lot cleaner in text-only browsers, and cut their home page's load time.

cnn.com used 48 spacers, but they got it right -- each one had ALT="". Nice.

latimes.com used 0 spacers. Instead, their spacing needs were handled by style sheets. Outstanding. CORRECTION: Style sheets handle a part of their spacing needs, but Todd pointed out that the page does indeed use spacers -- 87, in fact. Some have ALTs, some don't.

usatoday.com used 94 spacers. Like nytimes.com, none of them had an ALT attribute. Poor.

chicagotribune.com used 86 spacers. These were all over the map. Some had ALT="", others had ALT="spacer", and still others had no ALT attribute at all.