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:

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

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

• javascript
• seo
• lazy-loading

4 Answers 4

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.

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.

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

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