HTML The Definitive Guide (48 page)

ID ONMOUSEOVER

ISMAP ONMOUSEUP

LANG SRC

LONGDESC START

LOOP

STYLE

LOWSRC

TITLE

NAME

USEMAP

ONABORT VSPACE

ONCLICK WIDTH

End tag:

None

Contains:

Nothing

Used in:

text

The format of the image itself is not defined by the HTML standard, although the popular graphical browsers support GIF and JPEG images. The HTML standard doesn't specify or restrict the size or dimensions of the image, either. Images may have any number of colors, but how those colors are rendered is highly browser-dependent.

Image presentation in general is very browser-specific. Images may be ignored by nongraphical browsers. Browsers operating in a constrained environment may modify the image size or complexity. And users, particularly those with slow network connections, may choose to defer image loading altogether. Accordingly, you should make sure your documents make sense and are useful, even if the images are completely removed.

5.2.6.1 The src attribute

The src attribute for the tag is required (unless you use dynsrc with Internet Explorer-based movies; see section 5.2.7.1). Its value is the image file's URL, either absolute or relative to the HTML document referencing the image. To unclutter their document storage, HTML authors typically collect image files into a separate folder they often name something like "pics" or "images."
[Referencing Documents: The URL, 7.2]

For example, this HTML fragment places an image of a famous kumquat packing plant into the narrative text (see Figure 5.8
): Here we are, on day 17 of the tour, in front of the kumquat packing plant:

What an exciting moment, to see the boxes of fruit moving In the example, the paragraph (

) tags surrounding the tag cause the browser to render the image by itself with some vertical space after the preceding text and before the trailing text. Text may also abut the image, as we describe in section 5.2.6.4.

Figure 5.8: Image integrated with text

5.2.6.2 The lowsrc attribute

To the benefit of users, particularly those with slow Internet connections, Netscape provides the lowsrc companion to the src attribute in the tag as a way to speed up document rendering. The lowsrc attribute's value, like src, is the URL

of an image file that the browser loads and displays when it first encounters the tag. Then, when the document has been completely loaded and can be read by the user, Netscape goes back and retrieves the image specified by the src attribute.

Ostensibly, the lowsrc image is a low-resolution, abbreviated version of the final src image that loads faster by comparison to quickly give the reader an idea of its content until the final, higher-resolution image eventually replaces it onscreen. But the lowsrc attribute can also be used for some very special effects.

Netscape uses the lowsrc image's dimensions to reserve space in the document for both the lowsrc and src images, unless you explicitly allocate that space with the height and width attributes described later in this chapter. Hence, if the dimensions of the image specified in the src attribute are different than those for the lowsrc image or your explicitly included height and width values, the src image will be reduced, enlarged, stretched, and/or compressed to fit in the allotted space. Moreover, the lowsrc and src images needn't be identical, so you might take advantage of the delayed rendering of the src image for simple animation.

The lowsrc attribute is for Netscape only. Other browsers ignore it and only load the image specified by the src attribute.

Netscape won't load either image if the user chooses not to auto-load images. In that case, both images will load in order when the user clicks the images button or clicks the image icon placeholder. No browser loads the lowsrc image only; you must include a src image, otherwise nothing will appear except the missing image icon.

5.2.6.3 The alt and longdesc attributes
The alt attribute specifies alternative text the browser may show if image display is not possible or disabled by the user. It's an option, but one we highly recommend you exercise for most images in your document. This way, if the image is not available, the user still has some indication of what it is that's missing.

The value for the alt attribute is a text string of up to 1024 characters, enclosed in quotation marks if you include spaces or other punctuation. The alternative text may contain entity references to special characters, but it may not contain any other sort of markup; in particular, no style tags are allowed.

Graphical browsers ignore the alt attribute if the image is available and downloading is enabled by the user. Otherwise, they insert the alt attribute's text as a label next to an image placeholder icon. Well-chosen alt labels thereby additionally support those users with a graphical browser who have disabled their automatic image download because of a slow connection to the Web.

Nongraphical, text-only browsers like Lynx put the alt text directly into the content flow just like any other text element. So, when used effectively, the alt tag sometimes can transparently substitute for missing images. (Your text-only browser users will appreciate not being constantly reminded of their second-class web citizenship.) For example, consider using an asterisk as the alt attribute alternative to a special bullet icon: Introduction