Image Dimensions

Why include height and width

When you are coding an HTML page, you will want to use images to add spice to your page. But when you do, it is important that you give the height and width attributes for your image. The reason is that without these attributes, the browser has to wait until the entire image has downloaded before it knows how big it is, and therefore how much space it will take up on the page. For that reason, nothing will be displayed at all until the entire image is downloaded, and your page will feel "slower" on that account. The exact same page, with height and width attributes included, will feel much "faster" because the rendering engine at the heart of the browser can set aside the space needed for the image, and begin rendering other elements (like the text) immediately without waiting for the image to finish downloading. While the image is downloading, the "alt" text is generally displayed, which is just one reason why you should always include "alt" text.

How to do it

If you are hand-coding your pages, how do you obtain the height and width attributes? There are a number of ways. First of all, if you have a graphics program, like Paint Shop Pro or Fireworks, you can get this information easily from the program. But if you don't yet have such a program, you can still get the information from your browser. All you need to do is "drag" the image into the window of your browser, and the image will be displayed there. Once the image is displayed there, right click (PCs) on the image to bring up a menu of options. What happens next is different depending on the browser.

So it is really easy to get this information. Make sure you use it in coding your pages.