Using Images In Your Website

Types of Images

The best images to use have the ".gif" or ".jpg"/".jpeg" extensions on the end.  It is advisable not to use ".bmp" images since Netscape users will not be able to see them.  In general, GIF images are great for images with not too many colours, or simple cartoons or animated images, and JPEG files are better for images with lots of colours, like photos.

Image Tag

The only tag you really need to know for putting an image on your website is:

Simply replace "pic.gif" with the name of your image file.  Note that the browser assumes that the picture is in the directory you are currently in.  If you want to put in an image that is in another directory of your site, you may use the same shortcut as mentioned in the previous lesson:

There are several other options that you can put in the tag as well:

ALIGN - Options include TEXTTOP, ABSBOTTOM ABSCENTER, CENTER, LEFT and RIGHT.  This option will line up the image vertically and horizontally with the text.  Note that the CENTER and ABSCENTER terms refer only to the vertical alignment.  If you want your picture to be in the centre of a line, you must put put the <CENTER>...</CENTER> tags around the image tag.
ALT - ALT="insert text here"; You can put a title or description of your image here.  If the browser is slow in loading up the pictures, the ALT text will appear in the place where the picture usually goes.  The text will also appear if the reader rolls his mouse over the image.  This image is useful for those who have slow browsers, or do not have the image loading option on for their browser, and also for readers who are blind and use a browser with audio capabilities.
BORDER - You can dictate the size of the image border in pixels.  Generally, the border only shows up if you use your image as a link to another page/site.  If you don't want a border to show up in these cases, use BORDER=0.
HEIGHT - Forces the picture to be a certain number of pixels high.
HSPACE - Dictates the number of pixels of space you want between the image and whatever is beside it (text, another image, etc.).
LOWSRC - LOWSRC="picture.gif" allows you to show a lower resolution image before the actual image is displayed. This is especially useful for images that have a high resolution, a lot of colours, or that are big in size (Megabyte-wise) in general. You can make a smaller, lower resolution or black and white version of your image which will load faster than the actual image and display this first so that the reader can have an idea what the image looks like without having to wait for a long time.
VSPACE - Dictates the number of pixels of space you want between the image and whatever is above/below it (text, another image, etc.).
WIDTH - Forces the picture to be a certain number of pixels wide.

HEIGHT and WIDTH of your Image

Although you can use this to resize your image as it appears on the site using the HEIGHT and WIDTH attributes in the IMG tag, the actual file size of your image is the same.

Let's say your image is called "goat.jpg", and it is a large file (say 800 KB, original size is 300x400 pixels).  Guarenteed that it will take a long time for the browser to load up that picture.  If you put it on your page with the following tag:


It will still take the same amount of time to load.  If you want to save bandwidth, and loading time, you should open the picture in a picture Editor (say Adobe Photoshop or Paintshop Pro) and resize it there before uploading the picture to your site. 

Aligning the Images

If you want to display an image on its own, you can use the tag:

to clear everything on either side of the graphic.  Otherwise, the text will automatically wrap around it.

I will show a few examples of the picture alignment option on the next page.

In order to get a good layout as in the magazines, you may want to align a series of images or some images and the text.  In order to do this, you need to use tables.  This will be covered in the next lesson.  If you do use tables, it is important to remember that you must use the exact number of pixels in defining your table and cell widths as opposed to percentages of the screen. Otherwise, you will not necessarily have the look that you were aiming for.

Return to the HTML Lesson Guide
Examples of Image alignment
Read the next lesson: Creating Tables

This page created by Kat Lai.
Feel free to e-mail me with any comments or questions.