Specifying Image Dimensions

Method Type: User (images)
(this means that the method is handled by the webmaster)

Status:Must be applied by the user.

Introduction:

Images, as most elements used on a web page have certain attributes. Image dimensions are attributes and it is very important for the requesting web browser that they are specified in the HTML or CSS.

How specifying image dimensions work:

As the web browser is building the web page the first thing he will do is to check where there is text and where the images are located. In order for the browser to show the page he will need to build it basing the build on the information like text length, font size and of course image dimensions. If the image dimensions are not specified the web browser will first build the entire page based on the text he received and then he will re-build the page by rendering the images and re-locating the text around them. This increases the load speed of a page significantly, especially when there is more than one image without specified dimensions. When image dimensions are specified the browser will start building the page knowing where the images will be and he will build the text accordingly. It is also very important for the dimensions to be correctly specified as wrong data will force a reflow and additional delay.

Specifying image dimensions provides the following Advantages:

• Increased page load speed

How to specify image dimensions:

As it is important to specify the image dimensions in order to speed your website's page loading, you can specify them by adding the images to your <img> tag lines.

This is how an image without specified dimensions looks in the HTML:

<img src="picture.jpg" />

If the image has the width and height dimensions of 300x200 we will add:

<img src="picture.jpg" width="300" height="200" />

To specify the image dimensions in an Inline CSS you will need to add the following line:

<img src=" picture.jpg" style="width: 300px; height: 200px">

If you want to specify the image dimensions in an external CSS the code you need is:

#picture.jpg { width: 300px; height: 200px; }

Advance users can use responsive design for CSS depending on the content. In it you can set min/max for width/height, padding for image containers and absolute positions for images that will fill those containers.