CODEWITHSUNDEEP
javascripthtmlseo
Bastien Robert
Bastien Robert

Reputation: 940

Asynchronous image loading and SEO

I'm working on a middleman gem to load images asynchronously, with the same effect as Medium.

All is working perfectly but about the SEO, I don't have any idea of what happens. The image tag looks like this: <img src="BIG_IMAGE.jpg" data-compress="SMALL_IMAGE.jpg">. Here is what the script is doing:

Do you think it's SEO fiendly, perhaps will it better to set it in a div and load the SMALL_IMAGE as background or using canvas ?

Here the script:

var AsyncImage = {
  init: function () {
    this.els = document.querySelectorAll("[data-compress]")
    this.engine()
  },
  engine: function () {
    for (var i = 0; i < this.els.length; i++) {
      var el = this.els[i]
      var d = el.src
      this.small(el)
      this.load(el, d)
    }
  },
  load: function (el, d) {
    var img = new Image()
    img.src = d
    img.onload = function () {
      el.src = img.src
      el.classList.add('async-large-loaded')
      el.classList.remove('async-small-loaded')
    }
  },
  small: function (el) {
    el.src = el.dataset.compress
    el.classList.add('async-small-loaded')
    delete el.dataset.compress
  }
}

AsyncImage.init()

Upvotes: 2

Views: 1250

Answers (1)

Bastien Robert
Bastien Robert

Reputation: 940

Finally, I found the answer to my question on the Webmasters community, but I think it would be interesting to post it here too.

Asynchronous image loading doesn't have a real impact on ranking. Setting the default image (bad quality) on the src attribute, waiting it's load asynchronously the HQ image seems to be ok.

There is technical fixes to don't forget, like setting a noscript tag for people which disable JS on their browser, and then set a a tag around the image, pointing to the HQ image path, it seems there's not a big impact on ranking if you're ranking an image threw a a or img tag but it's needed anyway to rank it in a better way.

So here, the better option will be to get a code like the following:

<a href="BIG_IMAGE.jpg">
  <img src="BIG_IMAGE.jpg" data-compress="SMALL_IMAGE.jpg">
</a>

link: https://webmasters.stackexchange.com/questions/61761/lazy-loading-images-and-effects-on-seo

EDIT (02/01/2018): I test the SEO by setting up the domain (without specific configuration) on the webmaster console. Everything is alright, the HQ image is perfectly indexed and the LQ image is not.

Upvotes: 1

Related Questions