seo Question posted in
Some basic information to get you started with this can be found here.

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

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

Tags:

4

Answers


  1. 0

    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:

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
  4. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search