Images

By reading this you will learn how to put an image on your page. First you have to know that an image is not stored in the html file. The image is a file itself, usually in a format called GIF (*.gif) or JPEG (*.jpg). To display the image, you have to link to it.

Display an Image

To display an image we use the <img> tag (no end tag is needed).

<img src="image.gif">

This will display the image with the filename image.gif, but if something goes wrong it's a good idea to have an alternative text that will be displayed if the reader's browser fails to display the image. To do this use add the alt attribute:

<img src="image.gif" alt="It's an image">

If your image is stored somewhere else, you change that with the src attribute. Here are some examples:

<img src="image.gif" alt="It's an image">
File in the same directory as the HTML document.

<img src="gifs/image.gif" alt="It's an image">
File in a sub directory called gifs.

<img src="http://www.sun.com/images/photo.gif" alt="It's an image">
This will display an image which is located on another server.

Image location

As default, an image will be displayed on the left side of the page, but that can be changed with the align attribute.

This will put the image to the left, right or in the middle of the page.

<img align=left src="image.gif">
<img align=right src="image.gif">
<img align=center src="image.gif">

You may also change the vertical location, at the top, bottom or in the middle.

<img align=top src="image.gif">
<img align=bottom src="image.gif">
<img align=middle src="image.gif">

Border

You may also place a border around an image.

<img src="image.gif" border=?>

? is the width of the border. Use border=0 if you don't want any border at all.

Space Around the Image

If you want a blank space around the image, if the text is too close, for example, you'll write:

<img src="image.gif" vspace=20 hspace=10>

Now the vertical space (vspace) will be set to 20 pixels and the horizontal space (hspace) 10 pixels.

Image size

You may change the size of an image, but remember that the image quality will be very poor if the size you you've entered is far from the original size.

This picture is 100 pixels wide and 22 pixels high, it looks like this:



<img src="gfx/gateway.gif" width=100 height=22 alt="Example">

Now let's change the size with the height and width attributes.



<img src="gfx/gateway.gif" width=80 height=100 alt="Example">


Make it a habit to always set the height and width tag on all images you use (I also mean images you display in their original size) because then your pages will load faster.

Last updated 970621