The width and height Attributes

Topics on This Page

The width and height Attributes
Changing an Image's Size
Using a percentage width
Drawing Solid Rectangles
Transparent Images for Spacing
Example

The width and height Attributes

width and height tell the browser how large the image is. The HTML standard does not define these as required attributes and the validator will accept your <img> tags without them. However, you should always include them.

So, how do you know what size an image is?

If you've created the image yourself in a graphics editor such as Photoshop or Paint Shop Pro, you probably know the image size. The graphics editor shows you the image size, and you probably chose the size yourself.

If you've obtained the image from another source, you'll have to determine its size. One way is to open it in your graphics editor. If you have Netscape or MSIE 5+, you browser can also tell you. Open the image in the browser just as you would an HTML file: use File|Open and navigate to the image you want to display. In Netscape, the width and height are shown in the title bar. In MSIE 5, right-click on the image and choose "Properties". The width and height are shown as part of the properties.

If the image is displayed on a web page, you can right-click it in MSIE 5 and choose properties. In Netscape, you can right-click and choose "View Image" — the width and height will again appear in the title bar.

Changing an Image's Size

The size that you specify doesn't have to match the actual image size. Here's an example of an image displayed at its actual size, and also at half-size and at twice its size:

In general, avoid resizing images in the browser. If the image is the wrong size for your page, edit it in a graphics program. A graphics program can do a far better job. You have more tools available: you might get a nicer image by cropping it rather than by simply reducing its size.

If you use a graphics program to make an image smaller, the image will have a smaller file size and will download faster. Here, I've reduced the image in half both horizontally and vertically, so the area is only 1/4th as large as the full-size version. If I reduced the size in a graphics editor, I'd wind up with a file roughly 1/4th as large as the original.

As you can see here, you'll generally get very poor results trying to enlarge an image in the browser. There simply isn't enough image information to allow it to be blown up nicely. You'll have the same problems trying to increase the size in a graphics editor, but at least you'll have retouching tools available.

If you include an image on your page and find that it displays poorly, verify that you specified the correct width and height. If you're off by even a pixel, the browser will be attempting to resize it and it may display poorly.

Using a percentage width

One use for an image is for separators, similar to the <hr> tag. <hr> is easier to use, of course, but it's very limited in shape and Netscape doesn't support colored lines with <hr>. Suppose you have an image such as this 100x5 image:



You can use this as a separator line by using a percentage width. Here's how this image displays with width="100%" (keeping height="5"):

You can also specify percentages for the height, although I can't think of a good reason offhand why you'd want to.

Drawing Solid Rectangles

You can also use width and height to stretch a single-color image into any width or height to draw horizontal lines or other rectangular shapes. The following images are all the same 1x1 pixel image, just with different width and height attributes:

width="100" height="10":

width="20" height="20":

width="5" height="20":

Transparent Images for Spacing

You can also use this same method with an invisible ("transparent") image to create spacing. For example, you could use a transparent image to create an indented paragraph. I'll first illustrate this with the non-transparent image:

<p>
  <img src="images/browndot.gif" alt="" width="10" height="3" />
  The first line of this paragraph is indented using a gif.
  The gif is stretched to the width desired. Of course, CSS
  provides a better method for creating this effect (although
  it's not supported in as many browsers).
</p>

The first line of this paragraph is indented using a gif. The gif is stretched to the width desired. Of course, CSS provides a better method for creating this effect (although it's not supported in as many browsers).

Substituting a transparent image for the colored one, this appears like this:

The first line of this paragraph is indented using a gif. The gif is stretched to the width desired. Of course, CSS provides a better method for creating this effect (although it's not supported in as many browsers).

If you need a transparent gif for this purpose, right-click anywhere in the following box and save it.

Example

Here's your chance to play with a few images.

I've included one image inside a <p> tag and one that's not inside <p>. One is missing the alt tag. Try validating this and notice that an error is reported for the missing alt tag. Change the doctype to strict (remove " Transitional") and validate it again. An error is reported for the <img> tag that's not inside <p>.

Here are some images that you can display if you wish:

Try some of these out using the correct width and height. Also try different widths and heights to see how well (or how poorly) your browser displays them at different sizes.

Try using the wrong case for one of these (eg., Bird02.jpg instead of bird02.jpg). What happens?

Try using title instead of alt. Does your browser handle it differently? If your browser works with title, try including both title and alt with different values. Which one gets displayed?