The src attribute

The src attribute for the <img> tag is required (unless you use dynsrc with Internet Explorer-based movies. 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.”

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:
<p>
<img src="pics/packing_plant.gif">
<p>
What an exciting moment, to see the boxes of fruit moving

In the example, the paragraph (<p>) tags surrounding the <img> 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.

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 <img> 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 <img> 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.

The alt attribute

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:

<h3><img src="pics/fancy_bullet.gif" alt="*">Introduction</h3>

A graphical browser displays the bullet image, while in a nongraphical browser the alt asterisk takes the place of the missing bullet. Similarly, use alt text to replace special image bullets for list items. For example, the following code:

<ul>
  <li> Kumquat recipes <img src="pics/new.gif" alt="(New!)">
  <li> Annual harvest dates
</ul>

displays the new.gif image with graphical browsers, and the text “(New!)” with text-only browsers.

image alignment

The alt attribute lets you use even more complex text (see Figure 5.9):

Here we are, on day 17 of the tour, in front of the kumquat
packing plant:
<p>
<img src="pics/packing_plant.gif"
  alt="[Image of our tour group outside the main packing plant]“>
<p>
What an exciting moment, to see the boxes of fruit moving

The align attribute

The HTML standard does not define a default alignment for images with respect to other text and images in the same line of text, so you cannot absolutely predict how the mixture of text and images will look.[4] HTML images normally appear in line with a single line of text. Our common media like magazines typically wrap text around images, with several lines next to and abutting the image, not just a single line.

[4] Most of the popular graphical browsers normally insert an image so that its base aligns with the baseline of the text–the same alignment as that specified by the attribute value of bottom. Nonetheless, HTML document designers should assume that alignment varies between browsers and always include the desired type of image alignment.

Fortunately, HTML document designers can exert some control over the alignment of images with the surrounding text through the align attribute for the <img> tag. The HTML standard specifies five image-alignment attribute values: left, right, top, middle, and bottom. The left and right values flow any subsequent text around the image, which is moved to the corresponding margin; the remaining three align the image vertically with respect to the surrounding text. Netscape adds four more vertical alignment attributes to that list: texttop, absmiddle, baseline, and absbottom, while Internet Explorer adds center.

The following list contains descriptions for the inline HTML image alignments; see Figure 5.10 for examples.

top

The top of the image is aligned with the top edge of the tallest item in the current line of text. If there are no other images in the current line, the top of the image is aligned with the top of the text.

texttop (Netscape)

The align=texttop attribute and value tells Netscape to align the top of the image with the top of the tallest text item in the current line. This is slightly different from the standard HTML top option, which aligns the top of the image with the top of the tallest item, image or text, in the current line. If the line contains no other images that extend above the top of the text, texttop and top have the same effect.

middle

Netscape and Internet Explorer treat the middle image alignment value differently: Netscape always aligns the middle of the image to the baseline of the text, regardless of other inline elements, such as another inline image (see Figure 5.11). Internet Explorer, on the other hand, aligns the middle of the image to the middle of the tallest item in the current line, text or image (see Figure 5.12). Notice the alignments and differences in Figure 5.11 and Figure 5.12, particularly when only one image contains the align attribute. Both figures display the HTML fragment:

Line of text
<img src="pics/horiz.gif" align=middle>
<img src="pics/vert.gif">
goes on ...
<br clear=left>
<p>
Line of text
<img src="pics/horiz.gif" align=middle>
<img src="pics/vert.gif" align=middle>
goes on ...

Also note that Internet Explorer Version 3 treats middle, absmiddle, and center the same, whereas earlier Internet Explorer versions and the current Netscape (Version 4) distinguishes between middle and absmiddle alignments. (If you are confused as to exactly what each alignment value means, please raise your hand.)

absmiddle

If you set the align attribute of the <img> tag to absmiddle, the browser will fit the absolute middle of the image to the absolute middle of the current line. For Netscape and earlier versions of Internet Explorer, this is different from the common middle option, which aligns the middle of the image with the baseline of the current line of text (the bottom of the characters). Version 3 of Internet Explorer, on the other hand, treats absmiddle the same as middle and center.

center

The center image alignment value gets treated the same as absmiddle by both Internet Explorer and Netscape, but note that the browsers treat absmiddle and middle differently.

bottom and baseline (default)

With Netscape and earlier versions of Internet Explorer, the bottom and baseline image alignment values have the same effect as if you didn’t include any alignment attribute at all: the browsers align the bottom of the image in the same horizontal plane as the baseline of the text. This is not to be confused with the absbottom, which takes into account letter “descenders” like the tail on the lowercase “y.” Internet Explorer Version 3, on the other hand, treats bottom the same as absbottom. (Did we see a hand up in the audience?)

absbottom

The align=absbottom attribute tells the browsers to align the bottom of the image with the true bottom of the current line of text. The true bottom is the lowest point in the text taking into account descenders, even if there are no descenders in the line. A descender is the tail on a “y,” for example; the baseline of the text is the bottom of the “v” in the “y” character.

Use the top or middle alignment values for best integration of icons, dingbats, or other special inline effects with the text content. Otherwise, align=bottom (the default) usually gives the best appearance. When aligning one or more images on a single line, select the alignment that gives the best overall appearance to your document.

Wrapping text around images

The left and right image alignment values tell the browser to place an image against the left or right margin, respectively, of the current text flow. The browser then renders subsequent document content in the remaining portion of the flow adjacent to the image. The net result is that the document content following the image gets wrapped around the image.

<img src="pics/kumquat.gif" align=left>
The kumquat is the smallest of the citrus
 fruits, similar in appearance to a tiny
orange. The similarity ends with its appearance,
however. While oranges are generally sweet, kumquats
are extremely bitter. Theirs is an acquired taste,
to be sure.

Figure 5.13 shows text flow around a left-aligned image.

You can place images against both margins simultaneously (Figure 5.14) and the text will run down the middle of the page between them:

<img src="pics/kumquat.gif" align=left>
<img src="pics/tree.gif" align=right>
The kumquat is the smallest of the citrus
fruits, similar in appearance to a tiny
orange. The similarity ends with its
appearance, however. While oranges are
generally sweet, kumquats are extremely
bitter. Theirs is an acquired taste,
to be sure.

While text is flowing around an image, the left (or right) margin of the page is temporarily redefined to be adjacent to the image as opposed to the edge of the page. This means that subsequent images with the same alignment will stack up against each other. The following source fragment achieves that staggered image effect:

<img src="pics/marcia.gif" align=left>
Marcia!
<br>
<img src="pics/jan.gif" align=left>
Jan!
<br>
<img src="pics/cindy.gif" align=left>
Cindy!

The results of this example are shown in Figure 5.15.

When the text flows beyond the bottom of the image, the margin returns to its former position, typically at the edge of the browser window.

Centering an image

Have you noticed that you can’t horizontally center an image in the browser window with the align attribute? The middle and absmiddle values center the image vertically with the current line, but the image is horizontally justified depending on what content comes before it in the current flow and the dimensions of the browser window.

You can horizontally center an inline image in the browser window, but only if it’s isolated from surrounding content, such as by paragraph, division, or line break tags. Then, either use the <center> tag, or use the align=center attribute or center-justified style in the paragraph or division tag to center the image. For example:

Kumquats are tasty treats
<br>
<center>
<img src="pics/kumquat.gif">
</center>
that everyone should strive to eat!

Use the paragraph tag with its align=center attribute if you want some extra space above and below the centered image:

Kumquats are tasty treats
<p align=center>
<img src="pics/kumquat.gif">
</p>
that everyone should strive to eat!

The border attribute

Browsers normally render images that also are hyperlinks (included in an <a> tag) with a two-pixel-wide colored border, indicating to the reader that the image can be selected to visit the associated document. You can change the thickness of that border with the border attribute to the <img> tag. The value of the border attribute is an integer equal to the border thickness in pixels.

Figure 5.16 shows you the thick and thin of image borders, as rendered from the following HTML source:

<a href="test.html">
 <img src="pics/kumquat.gif" border=1>
</a>
<a href="test.html">
  <img src="pics/kumquat.gif" border=2>
</a>
<a href="test.html">
  <img src="pics/kumquat.gif" border=4>
</a>
<a href="test.html">
  <img src="pics/kumquat.gif" border=8>
</a>

Removing the image border

You can eliminate the border around an image hyperlink altogether with the border=0 attribute within the <img> tag. For some images, particularly image maps, the absence of a border can greatly improve the appearance of your pages. Images that are clearly link buttons to other pages may also look best without a border.

Be careful, though, that by removing the border, you don’t diminish your page’s usability. No border means you’ve removed a common visual indicator of a link, making it less easy for your readers to find the links on the page. Browsers will change the mouse cursor as readers pass it over an image that is a hyperlink, but you should not assume they will, nor should you make readers test your borderless images to find hidden links.

We strongly recommend that you use some additional way with borderless images to let your readers know to click the images. Even including simple text instructions will go a long way to making your pages more accessible to readers.

The height and width attributes

Normally, a graphical browser determines the size of an image and, hence, the rectangular space to reserve for it in the display window, by retrieving the image file and extracting its embedded height and width specifications. This is not the most efficient way to render a document since the browser must sequentially examine each image file and calculate its screen space before rendering adjacent and subsequent document content. That can significantly increase the amount of time it takes to render the document and delay scanning by the user.

A more efficient way for HTML authors to specify an image’s dimensions is with the height and width <img> attributes. That way, the browser can calculate and reserve space before actually downloading an image, speeding document rendering. Both attributes require an integer value that indicates the image size in pixels; the order in which they appear in the <img> tag is not important.

Resizing and flood-filling images

A hidden feature of the height and width attributes is that you don’t need to specify the actual image dimensions; the attribute values can be larger or smaller than the actual size of the image. The browser automatically scales the image to fit the predefined space. This gives you a down-and-dirty way of creating thumbnail versions of large images and a way to enlarge very small pictures. Be careful, though: the browser still must download the entire file, no matter what its final rendered size is, and you will distort an image if you don’t retain its original height versus width proportions.

Another trick with height and width provides an easy way to flood-fill areas of your page and can also improve document performance. Suppose you want to insert a colored bar across your document.[5] Rather than create an image to the full dimensions, create one that is just one pixel high and wide and set it to the desired color. Then use the height and width attributes to scale it to the larger size:

[5] This is one way to create colored horizontal rules in Netscape 3 or earlier, which don’t support the color attribute of the <hr> tag.

<img src="pics/one-pixel.gif" width=640 height=20>

The smaller image downloads much faster than a full-scale image, and the width and height attributes create the desired bar after the tiny image arrives at the browser (see Figure 5.17).

One last trick with the width attribute is to use a percentage value instead of an absolute pixel value. This causes the browser to scale the image to a percentage of the document window width. Thus, to create a colored bar 20 pixels high and the width of the window, you could use:

<img src="pics/one-pixel.gif" width="100%" height=20>

As the document window changes size, the image will change size as well.

If you provide a percentage width and omit the height, the browser will retain the image’s aspect ratio as it grows and shrinks. This means that the height will always be in the correct proportion to the width and the image will display without distortion.

Problems with height and width

Although the height and width attributes for the <img> tag can improve performance and let you perform some neat tricks, there is a particularly knotty downside to using them. The browser sets aside the specified rectangle of space to the prescribed dimensions in the display window even if the user has turned off automatic download of images. What the user often is left with is a page full of semi-empty frames with meaningless picture placeholder icons inside. The page looks terribly unfinished and is mostly useless. Without accompanying dimensions, on the other hand, the browser simply inserts a placeholder icon inline with the surrounding text, so at least there’s something there to read in the display.

We don’t have an answer to this dilemma, other than to insist that you use the alt attribute with some descriptive text so that users at least know what they are missing. We do recommend that you include these size attributes because we encourage any practice that improves network performance.

The hspace and vspace attributes

Graphical browsers usually don’t give you much space between an image and the text around it. And unless you create a transparent image border that expands the space between them, the typical two-pixel buffer between an image and adjacent text is just too close for most designers’ comfort. Add the image into a hyperlink, and the special colored border will negate any transparent buffer space you labored to create, as well as draw even more attention to how close the adjacent text butts up against the image.

The hspace and vspace attributes can give your images breathing room. With hspace, you specify the number of pixels of extra space to leave between the image and text on the left and right sides of the image; the vspace value is the number of pixels on the top and bottom. Figure 5.18 shows the difference between two wrapped images.

<img src="pics/kumquat.gif" align=left>
The kumquat is the smallest of the citrus fruits, similar
in appearance to a tiny orange. The similarity ends with its
appearance, however. While oranges are generally sweet,
kumquats are extremely bitter. Theirs is an acquired taste,
to be sure. Most folks, at first taste, wonder how you could
ever eat another, let alone enjoy it!
<p>
<img src="pics/kumquat.gif" align=left hspace=10 vspace=10>
The kumquat is the smallest of the citrus fruits, similar
in appearance to a tiny orange. The similarity ends with its
appearance, however. While oranges are generally sweet,
kumquats are extremely bitter. Theirs is an acquired taste,
to be sure. Most folks, at first taste, wonder how you could
ever eat another, let alone enjoy it!

We’re sure you’ll agree that the additional space around the image makes the text easier to read and the overall page more attractive.

usemap

The ismap and usemap attributes

The ismap and usemap attributes for the <img> tag tell the browser that the image is a special mouse-selectable visual map of one or more hyperlinks, commonly known as an image map. The ismap style of image maps, known as a server-side image map, may only be specified within an <a> tag hyperlink.

For example:

<a href="/cgi-bin/images/map2">
  <img src="pics/map2.gif" ismap>
</a>

The browser automatically sends the x,y position of the mouse (relative to the upper-left corner of the image) to the server when the user clicks somewhere on the ismap image. Special server software (the /cgi-bin/images/map2 program in the example) may then use those coordinates to determine a response.

The usemap attribute provides a client-side image map mechanism that effectively eliminates server-side processing of the mouse coordinates and its incumbent network delays and problems. Using special <map> and <area> tags, HTML authors provide a map of coordinates for the hyperlink-sensitive regions in the usemap image along with related hyperlink URLs. The value of the usemap attribute is a URL that points to that special <map> section. The browser on the user’s computer translates the coordinates of a click of the mouse on the image into some action, including loading and displaying another document.

For example, the following source specially encodes the 100-pixel wide by 100-pixel tall map2.gif image into four segments, each of which, if clicked by the user, links to a different document. Also notice that we’ve included, validly, the ismap image map processing capability in the example <img> tag so that users of other, usemap-incapable browsers have access to the alternative, server-side mechanism to process the image map:

<a href="/cgi-bin/images/map2">
  <img src="pics/map2.gif" ismap usemap="#map2">
</a>
...
<map name="map2">
  <area coords="0,0,49,49" href="link1.html">
  <area coords="50,0,99,49" href="link2.html">
  <area coords="0,50,49,99" href="link3.html">
  <area coords="50,50,99,99" href="link4.html">
</map>

Geographical maps make excellent ismap and usemap examples: browsing a nationwide company’s pages, for instance, the user might click on their home town on a map to get the addresses and phone numbers for nearby retail outlets. The advantage of the usemap client-side image map processing is that it does not require a server or special server software and so, unlike the ismap mechanism, can be used in non-web (networkless) environments, such as local files or CD-ROM.

Please read our more complete discussion of anchors and links, including image maps within links, in 7.5.

The name, onAbort, onError, and onLoad attributes

There are four <img> attributes currently supported by Netscape that let you use JavaScript to manipulate the image. The first is the name attribute, which lets you label the image so that it can be referenced by a JavaScript applet. For example,

<img src="pics/kumquat.gif" name="kumquat">

lets you later refer to that picture of a kumquat as simply “kumquat” in a JavaScript applet perhaps to erase or otherwise modify it. You cannot individually manipulate an image with JavaScript if it is not named.

The other three attributes let you provide JavaScript event handlers. The value of the attribute is a chunk of JavaScript code, enclosed in quotation marks; it may consist of one or more JavaScript expressions, separated by semicolons.

Netscape invokes the onAbort event handler if the user stops loading an image, usually by clicking the browser’s “stop” button. You might, for instance, use an onAbort message to warn users if they stop loading some essential image, such as an image map:

<img src="pics/kumquat.gif" usemap="#map1" onAbort="window.alert"('Caution: This image contains important
   hyperlinks. Please load the entire image.')">

The onError attribute is invoked if some error occurs during the loading of the image, but not for a missing image or one that the user chose to stop loading. Presumably, the applet could attempt to recover from the error or load a different image in its place.

Netscape executes the JavaScript code associated with the <img> tag’s onLoad attribute right after the browser successfully loads and displays the image.

Combining <img> attributes

You may combine any of the various standard and extension attributes for images where and when they make sense. The order for inclusion of multiple attributes in the <img> tag is not important, either. Just be careful not to use redundant attributes or you won’t be able to predict the outcome. In next post please see Video Extensions.