One of the hallmarks of the World Wide Web is the use of color, and the primary way that color is introduced into web pages is through the use of graphics files.

Some people surf with graphics turned off so their surfing will be faster. Some people use the Lynx browser that does not display graphics. Other people are visually impaired and can't see graphics. This means that in designing your web pages, you face a dilemma: How can I use graphics to convey information to my users when some users don't see the graphics. You can't completely solve this dilemma, but there are a few things you can do.

Use Alternate Descriptions

When you insert a graphic into a web page, you should include in the page a text (alternate) description of the graphic. This description is displayed on the monitor while the graphic is downloading. It is also displayed by some browsers when the mouse cursor is positioned over the graphic. Thus, persons not seeing the graphic images will see (or hear, if they have text-to-speech converters) the alternate descriptions.

All graphics should have alternate descriptions. Sometimes, however, you don't want a text description because the graphic is next to text that describes the graphic. Even in this case, you should include an alternate description, but it can be one that is empty.

The XHTML code for an alternate description looks like the following:

<img src="bu.gif" alt="Boston University in downtown Boston" height="60" width="150 />

Notice the alternate description (alt="Boston University in downtown Boston") contains legible text and two important keywords (Boston University and Boston) for web searches.

An empty alternate description is provided by just the alt name of that attribute of the element.

<img src="bu.gif" alt height="60" width="150" />

Use HEIGHT and WIDTH Parameters

Notice that the XHTML img tag given above contains HEIGHT and WIDTH parameters. These parameters control the size of graphics when they are displayed. You can change these parameters to change the size of the graphics, but this is not recommended, because it distorts the graphic images when they are displayed. Also, if you change the HEIGHT and WIDTH parameters to reduce the size of the images, the graphics will still take the same time to download that they would have taken if you hadn't changed the parameters. That is, the HEIGHT and WIDTH parameters change the display size but not the actual size of the graphics files.

The best way to change the display size of graphics is to use a graphics editor change the actual size, thus preventing the images from being distorted. In addition, reducing the actual size reduces download times.

Graphics editors that are in popular use are Adobe Photoshop Elements, Paint Shop Pro, The Gif Construction Set, and L-View Pro. In addition, there is an online application called Gif Works that will reduce your gif files for free.

[ Site Map ] [ Distance Learning ][ Home ] [ Up ] [ Color Compatibility ] [ Font Compatibility ] [ Graphics Compatibility ] [ XHTML Validation ] [ Screen Resolution ]