CODEWITHSUNDEEP
htmlimage
Karl Anderson
Karl Anderson

Reputation: 34846

Why do images that have a specified height and width render faster than those that do not?

It is a general best practice to set a height and width value for an <img> tag so that it will render faster, but why is this the case?

Upvotes: 3

Views: 331

Answers (2)

ming_codes
ming_codes

Reputation: 2922

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

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 tag, or in CSS.

Source

Upvotes: 1

Oriol
Oriol

Reputation: 288020

Because if you specify the width and the height, the browser can preserve that space before downloading the image, and continue parsing the html below. Then, when the image is being downloaded, it fills that space.

If you don't do that, browser doesn't know how much space should preserve beforehand. Then, html elements below the image will need to be moved when the image is downloaded.

Upvotes: 4

Related Questions