Specifying a width and height for all images allows for faster rendering by eliminating the need for unnecessary reflows and repaints. If height and width are not set, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load).i.e. the browser will require a reflow and repaint once the images are downloaded. .

Objectives:

• Including the width and height in images and embedded objects ensures fast page rendering by giving browsers the size information they need.


• Using the actual dimensions for thumbnails avoids wasted bandwidth and slow downloads.

Guidelines:

• Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded.


• Use actual size – Don't use width and height specifications to scale images on the fly. If an image file is actually 60 x 60 pixels, don't set the dimensions to 30 x 30 in the HTML or CSS. If the image needs to be smaller, scale it in an image editor and set its dimensions to match


• Width attribute is supported in all major browsers

Good Example:

An image with a height and a width of 42 pixels:

<img src="smiley.gif" alt="Smiley face" height="42" width="42">

Bad Example:

<img src="logo.gif" width="125" alt="logo">

(Only one dimension has been specified)