Sizing a picture

When you add a picture to your page, you can specify how big the picture is.

The width and height attributes give the size of the picture. If you leave out the settings for width and height, the browser automatically use the real size of the image.

You don’t have to enter the width and height but you should even when you use the real size because it helps your page load quicker. Why? Because the browser doesn’t have to load the whole picture before it can load the rest of the page. It can load the text instead and reserves areas for the pictures. Once the text loads, it fills in the pictures. This can save oodles of time.

Here's an example:

Generally, it is not a good idea to reduce image size using these settings, since the image will be transferred over the internet in its original size no matter what reduction is set for it. This will slow the loading of your page.

If you have a picture that is bigger than you want it to be on your page, you should reduce the size in a graphics program, rather than reducing the size on the page using the width and height attributes.

You can also use the hspace and vspace attributes to add blank space around a picture. Use hspace to add space to the left and right of the picture and vspace to add space above and below your pictures. Unfortunately, you have to add the same space to each side of the image. So, if you set hspace="10", you add 10 pixels to the left and right of your picture.