html - SEO impact on specifying image width and height for responsive website?

Question

I was told that specifying inline width and height for all images will be good for SEO and also helps the site loads faster, like so:

<img src="http://www.example.com/images/free-size.jpg" width="200" height="400" alt="random image" />

Although I can still overwrite the inline setting using height:auto;. So that images re-size properly when in different display platforms.

But just before I go ahead and doing this just want to reassure if these statements are true. Personally I feel dubious about fixing the inline dimension and overwriting using external CSS, just sound a bit hacky to me.....

Answer 1

I was told that specifying inline width and height for all images will be good for SEO and also helps the site load faster.

Yes. This has traditionally been true (at least the "site loads faster" part).

By specifying the height and width attributes of an <img> the browser reserves a space matching those dimensions for the image while it continues parsing the rest of the HTML document. Then when the browser loads the image, the reserved space is waiting and there is no need to reflow the document.

Providing this sizing data results in a faster rendering process.

In contrast, if the width and height attributes are omitted, the browser will not know the size of the image until the download is complete, which forces the browser to reflow the document, slowing down the rendering process.

Now imagine a page with 50 images with no defined width and height attributes. The performance hit could be very noticeable.

The practice above represents the traditional view of image loading.

In contrast, some people are now saying that for responsive design the width and height attributes should be avoided.

Responsive Design does not normally use any width or height attributes

The majority of responsive websites do not use width or height because they want the images to adapt to the screen size and by using fixed width and height using <img> which would dampen user experience and Google has declared this one of the most important factors.

_{source: https://webmasters.stackexchange.com/a/68494}

So there are arguments on both sides and the decision most likely depends on your individual case. As you make your decision here are some more details:

• Specifying image dimensions to improve browser performance
• Image width/height as an attribute or in CSS?