Image Width and Height

You can also specify the width and height of an image, as shown in the examples below. If you don't specify a width and height, then the browser will use the actual dimensions of the image.

<img src="path to image" alt="Alternate text"
  width="200" height="200">
<img src="path to image" alt="Alternate text"
  width="50%" height="50%">

In the first example, the sizes are absolute, and the image would be sized at 200x200 pixels. In the second example, the sizes are relative. The width would be 50% of the parent element, which would be 50% of the page width if the image were included directly in the body of the page (as opposed to being in a lower-level container such as a div). The height would also be 50% of the parent, except that if the image is included directly in the body of the page then instead of being 50% of the overall web page height, browsers typically interpret this to mean 50% of the window in which the web page is being viewed.

If the actual size of the image differs from what you've specified, then the image will be stretched or shrunk to fit.

There are advantages and disadvantages to specifying dimensions for images. Doing so tells the browser how much space to reserve even before it has downloaded the image, so it is better able to layout the rest of the page while the download is in progress.

The downside though is that this space is reserved even if the image is never downloaded (for example, because images are disabled). If you don't specify the dimensions, then only sufficient space to display the alternate text is used in this situation.

Another advantage to not specifying dimensions in your HTML is that if you resize the image for some reason, then all you need to do is to upload the new image to your site and browsers will handle the new dimensions automatically. If you have specified dimensions though, then you'll also need to go into your HTML code and manually change the size there as well.

Resizing Images

If you do want an image to be displayed on your page at a different size from the image's actual size, then instead of just specifying the desired size in your HTML code, you should resize it in an image editor such as Photoshop or GIMP. The quality of an image resized using one of these applications will be better than the quality of the same image resized by a browser.

<-- Previous Page

Images

Next Page -->

Absolute and Relative Paths