Yes, that’s true and luckily very simple to do. I will tell you why and how you should specify the dimensions of images on your web page.
Let’s first understand as to why we should specify the dimensions. Take a look below, this is what Google has to say about this issue:
When the browser lays out the page, it needs to be able to flow around replaceable elements such as images. It can begin to render a page even before images are downloaded, provided that it knows the dimensions to wrap non-replaceable elements around. If no dimensions are specified in the containing document, or if the dimensions specified don’t match those of the actual images, the browser will require a reflow and repaint once the images are downloaded. To prevent reflows, specify the width and height of all images, either in the HTML <img> tag, or in CSS.
So, in simple terms, when you specify dimensions of images, you help browsers to load them faster. When a browser knows the width and the height of images, it makes spaces for them even before these images have actually loaded. It definitely allows them to load your page faster.
How to specify the dimensions of the images?
In HTML an image tag starts something like this:
<img src=”path-to-image.jpg” alt=”image description” />
Now to specify dimensions, do the following:
<img src=”path-to-image.jpg” alt=”image description” width=”width of image in pixel, like 100px” height=” height of image in pixel, like 100px” />
See this image below:
The dimensions of this image have been defined like this:
<img class=”alignleft size-full wp-image-632″ alt=”Add banner” src=”https://splashsys.com/wp-content/uploads/2013/05/ad-seobanner12.gif” width=”250″ height=”250″ />
Go ahead make use of it on your website. You will find an improvement in its speed.