Image Incorporation

Once your image is located in a directory under your site's document root directory, you have to provide a position for it on your page. This is where the <IMG> tag comes in.

The <IMG> tag needs at least one attribute for it to work: SRC, the value of which is the location and name of the file containing the image to be displayed.

Two other attributes: WIDTH and HEIGHT are optional, but it is advisable to use them and they are very handy. The values they take define image width and height, and enable the browser to know the image size in advance so that it can organise the text accordingly. These values also make it possible to stretch or reduce the size of an image to obtain thumbnails.

Another attribute, ALT, allows you to add a description which appears on screen when the image resource cannot be found at the expected location.

Here is an example of image inclusion with all the attributes we have already looked at:

<IMG SRC="images/my_image.gif" WIDTH="250" HEIGHT="100" alt="Holiday photo">

In this example, the image my_image.gif must be located in the images directory.

In the following example, you see the same image with different HEIGHT, WIDTH and ALT attributes: