Developer

Check out these HTML graphics tips

Here are a few HTML graphics tips, including information about alternative text and graphical navigation.

By Donald St. John

Define dimensions

To give the impression of faster loading, include the width and height (in pixels) of your graphic as attributes of the <IMG> tag, like so:

<IMG SRC="mypic.gif" WIDTH="150" HEIGHT="170">

This creates a placeholder for the image, which allows the page's text to load before the image has completely downloaded and rendered. The appearance of text gives the illusion that the entire page is loading faster—and that'll make a difference to your readers. For the best effect, also be sure to use the <IMG> tag's ALT attribute.

Offer alternative text

While you may think your page's images are the coolest thing on the planet, some browsers don't support graphics—and some people turn off automatic loading of images to speed downloads. Providing alternative text for your images with the ALT attribute of the <IMG> tag lets everyone understand what you're showing in your images, even if they can't see the actual pictures. Just add it to the image tag like this:

<IMG SRC="mypic.gif" ALT="A portrait of the artist as a young man">

An added bonus: the browser inserts the ALT text before it downloads the image. Thus, even users who have images turned on can read your ALT text before seeing the image. And users of Internet Explorer 3.0 and above get to see the ALT text pop up when they pass their cursor over the image.

Get graphical navigation

Instead of a using a plain text menu bar for your site's navigation, you can group small images together to make a toolbar. The toolbar shown here, for instance, was created by placing small GIFs in a table:


Setting the table's BORDER, CELLSPACING, and CELLPADDING attributes to 0 makes the space between the individual images disappear so that they come together as a single seamless image. What's more, the images that make up the toolbar are cached by browsers, so if they appear on multiple pages (as most toolbars do), they are simply loaded from the cache rather than pulled from the server each time—which saves your viewers some download time.

A word to the wise: when you're using images as navigational links, make sure it's obvious that they're links. One trick is to make your images look like buttons by beveling the edges. And don't be afraid to put the words click here or go to on the image to be sure.

Control content location with GIFs

If you want to control—down to the pixel—where elements appear on the page, just use a transparent GIF that's only 1 pixel square. You can use it in one of two ways: first, you can stretch the GIF to the width or height you want it by using the WIDTH or HEIGHT attribute of the <IMG> tag:

<IMG WIDTH="10" SRC="cleardot.gif">This text is indented 10 pixels.

You'll get this:

This text is indented 10 pixels.

The other way is to use the HSPACE or VSPACE attribute of the <IMG> tag. These attributes leave horizontal and vertical blank space (in pixels) around the image. So to indent a line of text exactly 11 pixels, you would use the following code:

<IMG HSPACE="5" SRC="cleardot.gif">This text is indented 11 pixels.

This leaves 5 pixels of padding on either side of the GIF, plus one for the GIF, for a total of 11 pixels, like this:

This text is indented 11 pixels.

Both techniques add very little to download times, since only one tiny GIF needs to load.

By Donald St. John, with additional material and advice from Cormac Foster, Mark Kaufman, Charity Kahn, and Matt Rotter.

Editor's Picks

Free Newsletters, In your Inbox