The dimensions of GIF or JPEG files are recorded as pixels. Your computer monitor is also measured in pixels. A display may be 640 pixels wide by 480 high, or 800 pixels wide by 600 high. The image at the top of this page is 450 by 90 pixels.

When using the IMG tag, you can specify the size with the WIDTH and HEIGHT parameters. The file up.gif, for example, is 45 pixels square. This can be indicated as:

 <IMG SRC="up.gif" WIDTH=45 HEIGHT=45>

While the width and height are not required, it is good practice to specify them. By telling the browser how much space the image will take, it can help your page load more quickly. You can also use width and height to change the size of an image:

 <IMG SRC="up.gif" WIDTH=90 HEIGHT=90>

This will display the image as:

You should be careful using the WIDTH and HEIGHT parameters to change the size of an image. You can distort an image by trying to make a small picture bigger or by changing the ratio of height to width. Here is a picture which is 250 by 185 pixels, displayed at 400 by 200 pixels:

Even if you retain the correct ratio, resizing the image this way could result in distortion and poor image quality. Enlarging a photo, for example, will usually cause problems. Here is the same image enlarged 50% (375 by 277 pixels):

In most cases, it is best to display an image in its original size. You should use graphics software to change the size of an image instead of WIDTH and HEIGHT.

One exception is to use these settings to display a line or box of a certain color. You could create a tiny GIF file 1 pixel by 1 pixel of a particular color and then stretch it out on the web page. Here is an example using a blue image:

 <IMG SRC="blue.gif" WIDTH=450 HEIGHT=2>

This image would appear as:

Using the same image at a height of 10 and width of 350 would create a different line:

This technique can be an effective way to create lines and dividers of different sizes without having to save and download multiple files.