HTML Reference

Images

The three examples below show the basics of how to include an image. The first two images are located relative to the directory the HTML file is in. The third image is specified with a full URL. One important point is that web browsers treat the images as characters, that is, the image will be shown within

a paragraph.

<img
        src="pic.gif" alt="description of
        image">

        <img src="../pic.jpg" alt="description
        of image">

        <img
        src="http://www.fbe.unsw.edu.au/admin/images/bot-k4.jpg"
        alt="home">

Be aware that some browsers do not in-fact support graphics images! Therefore it is vital to use the ‘alt’ attribute to provide a meaningful description that will be displayed instead of the image.

The most commonly used image formats are GIF and JPG. GIF provides good compression for simple images (especially diagrams), particularly black & white images. The main limitation is that the maximum number of colours is 256. Compression is inefficient for complex (colourful) images. The GIF format has two interesting features: transparency and interlacing. Some graphics applications (for example Lview and Paintshop Pro) can write "gif89a" format images and with an assigned "background" colour, most web browsers will treat this colour as a transparent colour! In addition, images can be saved with interlacing ON, and most browsers will display the image in progressively more detail, this can allow the user to comprehend the image before it's completely downloaded.

JPG provides extremely good compression. It is particularly good for final versions of images (10% size of other 24bit image formats). It is a "lossy" format, which means that every time the image is saved some detail is lost, note that this decrease in quality is progressive.

Image Attributes

Name	Description	Syntax
Alt Text	Browsers either display the image (specified with the src attribute) or display the text specified with the alt attribute.	`alt="text description"`
Image Map	see Image Maps	`ismap usemap`
Image Source	This attribute is used to specify the image to be displayed. The file may be specified as a complete URL or may be relative to the location of the HTML file.	`src="foo.jpg"`
Left & Right Align	In standard HTML an image is like a letter or word: it is placed on the line after the previous word (though allowance is made for the image's height). Netscape has extended that to allow an image to be aligned with the left or right margins, with the text indented around the image. See also: Break Tag.	`align=left\|right`
Vertical Alignment	The vertical alignment options position the image in relation to the text around it.	`align=top\|texttop\| middle\|absmiddle\| baseline\|bottom\| absbottom`
Width & Height	These two options are intended to speed up browser operation by telling the browser how big the images are, before the images are downloaded. This allows the browser to place the text first, leaving space for the image(s). If only one dimension is specified, the other dimension is scaled in proportion. This attribute can be used to make the browser resize images...	`width=XX height=YY where XX and YY are the sizes in pixels.`
Vertical & Horizontal Space	VSPACE and HSPACE define how much space is left between an image and the text (or other images) around it.	`hspace=XX vspace=YY where XX and YY are the spaces in pixels.`
Border	Border is used to set the thickness of the border around images. Normally images will have no border unless they are part of a hyperlink. To have no border of a image that is a link, set border to 0.	`border=XX where XX is the thickness of the border in pixels.`

Go to next section: HyperText Links or return to the Contents page.
Last Updated: 28 September 1998