Images

Images are used in HTML documents to one: make the page visually effective and two: display information. Images can also be used as links, but this is discussed in the topic on linking.

Although images are good for a number of things, a page with too many images often looks too cluttered and can take too long to load, which can be frustrating, and as a business aspect it could lose clients.

An image - <img src="?">

To display an image you need to specify the URL of the image. Normally the filename is sufficient, eg. src="picture.jpg", if the image is in the same directory as the html file. You can also specify a relative path, eg. src="photos/picture.jpg" if the image is in the photos directory. A full url can also be used, eg. src="http://htmlguide.drgrog.com/images/photo_collage.jpg"

Alternate Text - <img ... alt="?">

Defines the text shown in place of an image when the image cannot load. This is actually a required attribute for valid html, and should briefly describe what the image normally would.

Image Size - <img ... width="?" height="?">

An image will normally be shown actual size, but by using the width and height attributes you can change the displayed size. You can specify the size in pixels or as a percentage. Tip: specify the size using the actual size of the image in pixels to force browsers to allocate space for the image before it is even loaded, ensuring you page layout remains the same with or without images displayed.

Border - <img ... border="?">

Add a border by specifying the thickness in pixels. You can also set border="0" to remove the border added when images are used as links. (*)

Image Alignment - <img ... align="?">

By default an image appears at the place specified in the html code(as with any other tag). However, you can align an image with the surrounding text or paragraph by setting any of align="left | right | top | bottom | middle". (*)

Spacing - <img ... vspace="?" hspace="?">

Adjust the whitespace (or runaround space) around an image, in pixels. Use vspace to adjust the vertical spacing above and below, or hspace for the left and right sides. (*)

See the images example, and select 'view source' in your browser to see the html code.

Important Note:

Tags marked with (*) should still work, but have superseeded by stylesheets (css), which is now the recommended way to change the font, colour, spacing, border or alignment of html elements.