CODEWITHSUNDEEP
htmlimagedom
kobe
kobe

Reputation: 15835

Reason for Specifying Image Width and Height for Images on <img />

Page speed suggests to give image height and width for the images , can someone please tell me what are the advantages of specifying the height and width for the image.

Normally we always give the url of the image in the src tag and always forgets to specify the width and height.

Upvotes: 2

Views: 399

Answers (3)

Ben Lee
Ben Lee

Reputation: 53309

By specifying the width and height ahead of time, the browser renders all the elements in their place and size on the page the first pass through. If you don't specify the sizes, it has to download the file before knowing them, and then it has to re-render all the components on the page, which takes time. It also makes for a less smooth experience for the user.

Upvotes: 2

Chase Florell
Chase Florell

Reputation: 47357

by specifying height and width, it helps so that the browser doesn't have to calculate it.

Upvotes: 1

Pekka
Pekka

Reputation: 449385

As Google Pagespeed's pages themselves explain, when given the image's dimensions before the image is loaded, the browser can reserve the necessary space for the image in the layout.

Specifying a width and height for all images allows for faster rendering by eliminating the need for unnecessary reflows and repaints.

Upvotes: 7

Related Questions