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.

  • IE – In the menu that appears, select “Properties”, and the resulting
    pop-up window will display the dimensions of the image, along with a few other
    pieces of information.
  • Netscape – In the menu that appears, select View Info, then click on the
    link for the image. At the bottom of the window you should now see the dimensions,
    along with other information for the image.

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

CC BY-SA 4.0 Image Dimensions by Kevin O'Brien is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.