Image Attributes


The alt Attribute

The alt attribute of the tag <img> is important for two reasons. Firstly, if the image is unavailable, a textual description of the image is displayed. Secondly, if a browser (either currently or in future) has voice capabilities, a verbal description of the image can be rendered. This may be particularly useful for the visually impaired. Please consider the code below, which makes use of the alt attribute of the tag <img>.

<img src=../gif/BookC.gif alt=BookC.gif>

Specifying the Width and Height of Images

The width and height attributes of the tag <img> may be used to scale images (see below); but even if an image is not to be scaled, the size attributes of the image tag should be included (despite them not being mandatory). Thus, the closed book image may be included in a document as follows.

<img src=../gif/BookC.gif alt=BookC.gif width=23 height=16>

The above reference to the closed book icon contains that which should be included in any reference to an image. Firstly, the alt attribute is specified so that if the image is unavailable then it is apparent to the viewer which image would be there in normal circumstances. Secondly, it also contains the width and height of the image - despite the image not being scaled. This allows a browser to know (in advance) the size of the image. Remembering that some images may take a while to download, specifying the size means that the textual portions of the page can be correctly formatted whilst the image is being downloaded. This saves the browser having to reformat the page once the image size has been ascertained. If for some reason, an image is unable to be located (or if images have been turned off in the browser), the document will still be correctly formatted if the size of the image is known.

Scaling Images

The width and height attributes of the tag <img> may be used to scale images. Unlike vector graphics objects (in which graphic objects are defined by a series of points), the quality of bitmapped objects is affected when scaled. When a bitmap is enlarged, rows of bits in the image are created. That is, the image data is interpolated in order to perform the scaling operation. Similarly, when a bitmap is shrunk, rows of bits are dropped from the image. As an example, the code required to present several scaled versions of the book icon is shown below (see Exercise 11 for a discussion involving the book icon).

<img src=../gif/BookC.gif alt=BookC.gif width=23 height=16>
<img src=../gif/BookC.gif alt=BookC.gif width=46 height=32>
<img src=../gif/BookC.gif alt=BookC.gif width=69 height=48>

The above code gives rise to the following images BookC.gif BookC.gif BookC.gif. Clearly, the image quality deteriorates when scaled. Generally, image contraction produces a better result than image dilation.

Exercise 12 (Images - Colors)

With judicious use of images and colors, a very good looking, well performing document may easily be produced. For performance reasons, small images should be used. Backgrounds should be carefully chosen and matched to the colors of text. The tag <body> has several options for specifying colors. These are:

bgcolor Specifies the color to be used for the page background.
text Specifies the default color of page text.
link Specifies the color of unvisited links.
vlink Specifies the color of visited links.
alink Specifies the color of active links.

If the attribute bgcolor is used to set the color of the page background then the color of the text and links should also be set; otherwise, text may be invisible or difficult to read. The attribute text may be used to change the color of normal text. The attribute link specifies the color of link text - prior to the link being visited. Once a link has been visited, the text of that link changes color to the value specified for vlink. At the instant a link is taken, the text color is that specified for the attribute alink.

Write a HTML document that satisfies the following criteria:


Exercise 13 (Background Images)

Alter the previous exercise to use a background bitmap. Note that the attribute background of the tag <body> may be used to achieve this. The image to be used is Space.gif (in the gif directory). The name ascribed to the document should be imageB.htm. Follow this link to see the solution.

Positioning Images

When an image is embedded in a paragraph of text, the align attribute may be used to determine the position of the image with respect to the surrounding text. The following example demonstrates the various types of positioning.

<p>These are embedded images ==>
<img src=../gif/BookC.gif alt=BookC.gif width=23 height=16 align=top>
<img src=../gif/BookC.gif alt=BookC.gif width=23 height=16 align=middle>
<img src=../gif/BookC.gif alt=BookC.gif width=23 height=16 align=bottom>.

The end result is as shown below.

These are embedded images ==> BookC.gif BookC.gif BookC.gif.

Left and right are also available. For example, to right align an image, the following code suffices.

<p><img src=../gif/BookC.gif alt=BookC.gif width=23 height=16 align=right>
The following image is right aligned ==>

BookC.gif The following image is right aligned ==>

Centering an image on the screen (without any surrounding text) may be achieved using the tag <div> to create a division. For example, the following code centers the book icon.

<div align=center>
<img src=../gif/BookC.gif alt=BookC.gif width=23 height=16>

The above code gives rise to the following.

Other Image Attributes

The hspace and vspace attributes of the tag <img> may be used to ensure that a certain amount of space surrounds an image. The border attribute may be used to surround an image with a border. The border value defaults to 1. Having a border around an image may be undesirable when the image is part of a link, and in such cases the border may be required to be set to 0 explicitly.

The next section next.gif discusses how GIF files may be used for animation.