Linking Images

The images do not become part of the document like they do when you create a word processor document. To put an image in your document you need to specify the image name and details similar to creating a hyperlink.

<img...>

This tells the browser to expect an IMaGe.

src="image.gif"

This tells the browser that SouRCe of the image is a file named image.gif.

width="100"

This is the width of the image in pixels. You do not have to put this, but if you do not the browser wait until the image is loaded before any remaining text, so the viewer has to wait for the image before they can read any further. The dimensions let the browser know how much space to leave for the image. You could stretch or scale your image by making this size greater or smaller than the actual image, but it is not recommended. If the image it too large it is better to use a smaller copy of it. See the note on pixels.

height="70"

This is the height of the image in pixels. You do not have to put this, but if you do not the browser wait until the image is loaded before any remaining text, so the viewer has to wait for the image before they can read any further. The dimensions let the browser know how much space to leave for the image. You could stretch or scale your image by making this size greater or smaller than the actual image, but it is not recommended. If the image it too large it is better to use a smaller copy of it.

alt="descriptive text"

Hover over the image to 
    reveal the 'alt' textThis ALTernative text will appear in place of the image if the viewers' browser has disabled the uploading of images. It also appears whilst waiting for the image to load and in most browsers when the mouse pointer moves over the image, like the Internet Explorer image on the right. It will also be read out by talking browsers designed for people with impaired vision.

You can use an image as a hyperlink. If an image is a hyperlink it is helpful if the alt text describes the target. See the page Page Design, Images and Hyperlinks.

To show it is a hyperlink it will have a border in the colour specified in the <body...> tag. This can be useful to let the viewer know the image is a link, but it may spoil the appearance of the page.

border="0"

This is the width of the border in pixels. If the image is a hyperlink make it zero ("0") if you do not want a border.

The code for the E-mail icon on the Types of Image page looks like this:

<img src="mail_me.gif" width="54" height="67" border="0" alt="E-mail">

If you use the same image again anywhere in your document, you use the same original image. You don't need another copy of the image, so you save space.

Pixels

Dimensions are measured in pixels, that is to say one "dot" on your computer screen. This will mean that the apparent size of the image will vary depending on the resolution of the screen. The more dots wide and high your screen is (higher resolution) the smaller the image will appear to be on the screen, compared with a lower resolution screen that is the same "real" dimensions (inches or centimetres, etc.).

 This square is 15 pixels wide and 15 pixels high.

15 x 15 pixel tile