lazy load images and SEO

Question

I am looking into implement a lazy load feature on image on a website, however I am wondering if there is any SEO downfalls to this. The script i'm looking into is the following:

http://www.dynamicdrive.com/forums/showthread.php?t=46393

Bascially, when an image tag appears in the users viewing area of the browser, javascript is called which replaces and loads the image on the fly. This downsizes the initial page load time. But, how might this affect SEO, particually image crawlers?

Thanks for any help!

Beersheba

Answer 1

Most crawlers won't execute Javascript. So you have to ensure that your images are displayed, or at least a temporary ones (low res) with proper alt tag.

Then it's not a problem to replace it by the high resolution one.

Please note that this won't work with Google Image Search, and therefore will affect your exposure on that search engine.

Disproportion

Is this because Google does run JavaScript? – Weep

It would be a waste of time to render the javascript. I know Google crawl javascript to look for URLs, but that's it. – Disproportion

Answer 2

Googlebot now render javascript so you don't have to do anything. Do the lazy loading and your images will still turn up in Google Image Search. Read source.

However...

If you care about other types of crawlers a method to look into could be the following:

<a href="your-image.jpg" class="lazy-load-link">
    <img src="placeholder.jpg" data-lazy-load-src="your-image.jpg" alt="Your image" />
</a>

Or if you already have a link...

<a href="other-stuff.html">
    <img src="placeholder.jpg" data-lazy-load-src="your-image.jpg" alt="Your image" />
</a>
<a href="your-image.jpg" class="lazy-load-link">Your image</a>

By this method your image will be crawled simply because it is linked to. Using javascript you have the possibility to change placeholder.jpg to your-image.jpg whenever you like. And keep the a.lazy-load-link element if you want to or remove it you prefer.

Subtangent

Answer 3

You may try to load images as background images, but I'm not sure if google index such kind of image reference. Btw, you may use tricks similar to this image lazy load tutorial in order to load all your images in case of no javascript support (in case of google bot).

Adin

This is exactly why links in questions/answers without any additional explanation are not a great idea : ] – Buehrer

Answer 4

You can use <noscript /> tag to store the normal version of the <img/> there, which will be indexed by Google

Ileneileo

This has been proved to not work. See for example (dinbror.dk/blog/lazy-load-images-seo-problem) – Manor