Why you should specify image width and height

Most websites do not specify the height and width of an image. A browser wil automatically detect the width and height of an image. Specifying the width and height of an image therefore seems time consuming and seems to make the html bloated. This is a misconception !!

Browser redering

If an image width and height are not specified the browser will need to analyze the entire image. This takes a relative long time. During this time the website will not be built in the browser. This makes the website seem slower then it is.

Syntax

The wrong way:
The right way:

A case study

Recently we took this idea to the test. We created a page with 40 random images (image pool was 10.000). One version with image dimensions spcifield and one without. On a fast pc with firefox 2.6 and a remote webserver (running apache+php) the html overhead was almost nonexistent. However when specifying the image dimensions the page would immediately start to built after receiving the html where the other version would wait untill all the images were loaded. This caused a 200 ms delay wich was 50% of the loading time !!

Conclusion

Where possible specify image dimensions to significantly speed up your website !

Analyse your website !

Please enter your domain name