HTML 4.0 Sourcebook
(Publisher: John Wiley & Sons, Inc.)
Author(s): Ian S. Graham
ISBN: 0471257249
Publication Date: 04/01/98

---

TIP: Purely Decorative Image?—Use an Empty ALT

Given a purely decorative image with no important meaning, you should use the ALT attribute to assign an empty description, that is:

<IMG SRC=“decoration.gif” ALT=“”>

This means that a user with a text-only browser will see nothing. This is far better than seeing the string “[IMAGE]”, or an image symbol, both of which leave a reader wondering if the author forgot to provide a description of an important part of the document.

---

ALT Text as Pop-up Help

Finally, with Netscape Navigator 4, as well as Internet Explorer 3 or 4, ALT attribute content is displayed as “pop-up” text (much like a tool tip in Windows and Mac programs) whenever the mouse pointer rests on top of an image. Thus, the ALT text can serve as a reminder of the role of an image—an example is shown in Figure 1.18. This is very useful when an image is used as the start of a hypertext link, as discussed later in this example.

Browser Loading of Images

How does the browser actually obtain images and complete the document? The browser first obtains the HTML document and then looks for IMG elements. If it finds IMG elements, the browser makes additional connections to the server(s), indicated by the SRC attributes, to obtain the required image files. Thus, a single document containing ten images will require 11 distinct connections to load the complete document content. Needless to say, this can be slow, particularly if the browser has a slow network connection to the server.

In addition, the way the browser formats the page can make the text rendering process incredibly slow. This is because browsers cannot properly format a page until they knows the sizes of the images being included—without this knowledge, the browser does not know how big a “box” to set aside for each image. For many browsers, the result is a blank display, with nothing being rendered until the browser knows the size of everything to fit on the page. This can be incredibly annoying to the reader. It would therefore be nice if the browser knew the size of the images before they actually arrived—in that way, the browser could format the document, leaving appropriate sized “boxes” on the page to be filled in by the arriving graphics. Indeed this is possible via HEIGHT and WIDTH attributes.

Image Size—WIDTH and HEIGHT Attributes

The IMG element supports optional HEIGHT and WIDTH attributes that define the size, in pixels, of the space to reserve on the display for the image. For example, if you have an image 500 pixels high and 230 pixels wide, you should include it in a document via the element

<IMG SRC=“image.gif” HEIGHT=“500” WIDTH=“230” ALT=“[alt text]”>

where HEIGHT and WIDTH give the image size in pixels. In this case, the browser retrieving the document knows the size of the image before the data are actually received. As a result, it can start drawing the page immediately, leaving an appropriate empty space (500 × 230 in this example) for the yet-to-arrive image. This significantly speeds up the presentation of the page to the user and is particularly important for pages containing large, slow-to-download images.

Image Formats

There are many formats for storing digital images, each with various advantages and disadvantages. Unfortunately, Web browsers are able to display only a small subset of commonly understood image formats, so that images for Web pages must be converted into one of these formats.

On the World Wide Web, the most universally accepted image format is the Graphics Interchange Format, or GIF (filename extension .gif). This was the format used in the previous figures. GIF images can be displayed inline by all Web browsers. Another common format is JPEG (filename extensions .jpeg or .jpg), which is a format optimized for storing photographic images. Almost all browsers support JPEG. Both GIF and JPEG store images in a compressed format, which means that images can be stored in relatively small files. This is important, as images tend to require big files, which can be very slow to access over the Internet. On the Web, smaller is almost always better!

A third common format is the X-Pixelmap, or its black-and-white X-Bitmap equivalent (filename extensions .xpm and .xbm respectively). However, these store data in a non-compressed format and are thus inefficient at storing images. Fortunately, such images can easily be converted to GIF or JPEG. Finally, the newer Portable Network Graphics format (filename extension .png) is of growing importance. The different image formats and ways of converting images between formats are discussed in more detail in Chapter 3.

Hypertext Links

The third paragraph in ex2a.html shows a hypertext link. The form is straightforward:

<A HREF=“ex2b.html”>hypertext links</A>

The element marking a hypertext link is called an A or anchor element, and the marked text is referred to as a hypertext anchor. The area between the beginning <A> and ending </A> tags becomes a “hot” part of the text. With graphical browsers such as Netscape Navigator or Microsoft Internet Explorer, “hot” text is often displayed with an underline, and usually in a different color (this is configurable by the user), while with lynx, this region of text is displayed in bold characters. Placing the mouse over this region and clicking the mouse button, or, with lynx, using the tab key to move the cursor to lie over the hot part and pressing Enter, causes the browser to access the indicated document or other Internet resource.

Images Within Hypertext Anchors

You can also place images inside hypertext anchors, as illustrated in the third paragraph in the document ex2a.html (Figure 1.4). Here the image sright.xbm lies inside an anchor (recall that the .xbm means this is an X-Bitmap image). The relevant piece of HTML is:

<a href=“ex2b.html”><IMG SRC=“sright.xbm” ALIGN=“middle”></a>

Graphical browsers indicate this by boxing the image with a colored or highlighted box, while lynx simply bolds the [Image] text string it uses in place of the image. However, adding a BORDER=“0” attribute to the IMG element can make this border disappear, as illustrated in the second anchored image in this paragraph. Note, in Figures 1.5 and 1.7, there is no box around this second image.

The use of a hypertext anchor to enclose an image makes it possible to use small images as button icons, as is common in most computer applications. This doesn’t do much good with lynx, of course, so if you do use images as navigation icons, you had better add an ALT attribute to let lynx (or Braille browser) users know what’s going on.

Space Characters Inside Anchor Elements

You will note that there are no spaces between the anchor tags and the IMG element that they surround. If you have spaces at either end of the enclosed anchor string, the browser will assume that spaces are intentionally part of the anchor and will render them accordingly. This is not always pleasing and can leave an anchored image with small horizontal lines sticking out from the bottom of the image, or anchored text with underlines hanging out beyond the beginning or end of the text. The latter is illustrated by the second selection of linked text in paragraph 2 of ex2a.html (Figure 1.4). Note, in Figure 1.5, the hyperlink underline extends out past the end of the actual anchored text. The lesson once again is: Use tags around the text you want to mark up and don’t include extra spaces unless specifically intended.