Specifying Image Dimension is one such recommendation that is given by the PageSpeed test to improve the speed of the site.
As it is well-known that every image on the web page has some attributes from which "width" and "height" are considered the most essential. And, it is important to mention the dimensions of each image on the web page.
What happens if the dimensions are not specified?
As the web browser displays your web page, it will check the position of the text and the images. The browser builds the page according to the text length, font size, and image dimensions.
The problem occurs when the size of the image is not specified and the web browser will first build the entire page based on the text it received and then it will rebuild the page by rendering the images and relocating the images around them.
This is where the loading speed of the page significantly increases, particularly when there are more than one images without specification of dimensions.
Therefore, it is very important to specify the image dimensions, so that browser can use that information to build the page without reflow and additional delays.
You may also like to read:- Combine Images Using CSS Sprites
How to specify image dimensions?
- In HTML you can use <img> tag to specify the dimensions.
This is how it looks like without dimensions.
<img src="picture.jpg" />Let’s say the dimensions of the image are 500X200.
<img src="picture.jpg" width="500" height="200" />- By using inline CSS, you can add in below-mentioned way.
<img src=" picture.jpg" style="width: 300px; height: 200px">- By using external CSS, it can be done as below:
#picture.jpg
{
width: 300px;
height: 200px;
}
- Advanced users
- Can use responsive designs for CSS according to the type of content.
- Can set min/max for width/height
- Add padding for image containers
- Add absolute positions for images that will fill those containers