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.....

Splay

It's faster to use the dimensions inline because you don't have to wait for another asset (the stylesheet) to load. But how do you intend to overwrite inline styles with a stylesheet? – Rochellerochemont

@Rochellerochemont by specifying width: 100%; height: auto;, external css on all inline images. They can be overwrited easily. – Splay

Three different things: external stylesheet (CSS), inline styles (CSS), height and width attributes (HTML). – Mohur

Duh, yes. My mistake. Thanks, Michael_B. – Rochellerochemont

I think you should ALWAYS define width and height inline, for two reasons: avoid page jumping and retina displays. See #39373119 for the full discussion. – Sodomy

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?

Mohur

Answer 2

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

No, it does help loading the site faster. It helps avoid flickering when rendering the page. If you want to load your images faster, make sure they have the same size as specified in the page and use a service like kraken.io to reduce the corresponding file size.

About SEO, it's improper image size and width for the screen size that can hurt your SEO. Google may consider you site as not user-friendly and/or not smartphone friendly.

Agglutinogen

What is the best option for responsive site that will not hurt the seo? Since the images are compulsory to be fluid in this case. – Splay

If they are fluid and adapt to the screen size, then there is no SEO issue. – Anaclitic

Answer 3

If you do not tell the browser the size of your images then it must "build" the page not once, but twice (or more times depending on how many images you have on the page). It will build it once to display all the text, and then it will wait until an image is downloaded. When one image is downloaded the browser can now determine the size of the image and will rebuild the page to wrap the text around that image. This process will happen for every image on your page.

If you just specify the image dimensions, it will already know the size of the images and can use that information to shape the page. It won't have to rebuild the page a million times.

Erek

Answer 4

The best approach I think is to use the aspect ratio in css.

.img-container {
    max-width: 500px;
    aspect ratio: 2/1;
    overflow:hidden;
}

The above css will reserve a container space for the image to load and prevent reflow.

Spacesuit

Do you know how much space would be reserved in this case? – Infract