CODEWITHSUNDEEP
htmlcssimagepagespeedyslow
Navin Rauniyar
Navin Rauniyar

Reputation: 10525

specify image dimension in html or not

When testing my site with gtmetrix, it suggests the following:

Page Speed

Specify image dimensions:

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

Details from Google

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.

YSlow

Do not scale images in HTML:

Scaling images in HTML can result in unnecessary bandwidth wasted downloading large images.

Details from Yahoo!

Web page designers sometimes set image dimensions by using the width and height attributes of the HTML image element. Avoid doing this since it can result in images being larger than needed.

So, which one to follow? Should I specify image dimension in html or not?

Upvotes: 0

Views: 1440

Answers (1)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Scaling and specifying image dimensions are two different things.

Scaling:

You just specify one of the width and height attributes. Suppose, if you specify width and didn't specify the height attribute then the image is scaled proportional to the width and vice-versa.

You may look at this for more detail.

Specifying image dimensions:

This means you should use both of the attributes i.e. width and height.

You may also look at this for more detail.

So, what google suggests?

Specify image dimensions: It means you should define both width and height attributes in your html.

And, what yahoo suggests?

Do not scale images in html: It means you should not just define only one of the width and height.

So, when you specify width and height attributes in your html both suggestions are passed.

FYI, I am adding this one:

Specifying image dimensions also affects SEO. Thus, it is a plus point to SEO Optimization. You might probably have seen in google search for more option to find specific images that are size of particular dimensions.

Upvotes: 1

Related Questions