CODEWITHSUNDEEP
performancexhtmlfrontendpagespeed
Jitendra Vyas
Jitendra Vyas

Reputation: 152637

Does adding width and height to inline images increase the page load performance?

Does adding width and height to inline images increase the page load performance?

<img id="moon" height="200" width="450" 
      src="http://www.domain.com/moon.png" alt="moon image" />

Compare to this

<img id="moon" src="http://www.domain.com/moon.png" alt="moon image" />

Upvotes: 3

Views: 1173

Answers (2)

TheJacobTaylor
TheJacobTaylor

Reputation: 4143

Yes. Many browsers will start rendering while things are still being downloaded. If they do not have sizes or the sizes are wrong, they use a place holder. Once the sizes are known, rendering is restarted from the beginning.

If you specify the correct sizes, many times you might not have to make rendering restart all over again. This saves CPU on the client side and allows the initial render to last. This improves the render time for the client.

Upvotes: 2

bumperbox
bumperbox

Reputation: 10214

i don't think it will make the page load faster, but it will help to render the page correctly straight away, because the browser knows the dimensions of the images to layout the page correctly before it has to fetch the image

Upvotes: 5

Related Questions