Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

We are using the following technique to lazy load images in our site:

For all images we put in the src attribute a url for a default img (i.e. a loader) and put the actual image url in the data-src attribute. Like so

<img src="loader.gif" data-src="img1.jpg" />

When the image is outside of the viewport nothing happens, but when the image goes inside the viewport, then the url from the data-src attribute is loaded and the image is correctly shown.

This has as a result that Google sees all the images in the page (i.e. a search results page) as having the same src attribute. Because the google bot of course parses only the 'unloaded' img tag with the default src.

My question is: does having many img tags with the same src attribute affect the SEO of the page?

share|improve this question
2  
I think proper title and alt are 90% of the job. Filename less. It can affect the results in Google Images I guess –  Martijn May 14 at 9:52
    
    
It certainly could affect the number of images you have indexed in Google Image Search. Are you asking about that, or about any affect that it would have on rankings for normal web search? –  Stephen Ostermiller May 14 at 10:36
    
@StephenOstermiller my primary concern is the rankings, but any effect (immediate or secondary) to the SEO is of interest –  bmenekl May 14 at 11:25
    
This question has been asked on StackOverflow but it doesn't have great answers in my opinion. –  Stephen Ostermiller May 15 at 13:22

3 Answers 3

up vote 3 down vote accepted

I've never seen image lazy loading have any negative impact on web search rankings. Improving the perceived performance of your site for users can really help your rankings. When fewer people bounce back to the search results because of performance problems with your site, your rankings will improve.

Google will not be able to index lazy loaded images for image search. There are some possible technical fixes instead such as:

  • use <noscript> tags that show the images for users that don't have JavaScript enabled (and search engine bots)
  • Also link to your images. It doesn't seem to matter to image search whether the image is in the img src or in the a href. So the following snippet would get the image lazy loaded and the full size image indexed in image search: <a href="/img_large/foo.jpg"><img data-lazy-load="/img_thumb/foo.jpg" src="/img/1x1_transparent.gif"></a>
share|improve this answer
    
I wouldn't rely on "noscript" -- we see a lot of spam trying to use it, so we're not always confident enough to trust content placed there. I like the idea of using links to the images. In general, if an image is one of the primary elements on a page, I'd still tend towards just embedding it naturally (at least one version of it, if you're using different sizes) so that you're sure it's indexed normally. We're working on a better story for this, but I don't see it changing today or tomorrow. –  John Mueller May 21 at 8:31
    
Using your tactic, you can try an <a> wrapper if your images are already surrounded by a link for products or something: <a href="/img_large/foo.jpg"><a href="www.example.com/page"><img data-lazy-load="/img_thumb/foo.jpg" src="/img/1x1_transparent.gif" /></a></a> The inner link takes the UI click, whereas the outer should still work for bots indexing images. –  dhaupin Oct 8 at 14:58

Most search engines will index images that are hidden as long as you don't use inline styles to hide the image. The majority of browsers will not load hidden images.

There is a test page that can verify this claim. Some older mobile browsers are the exception, but I argue lazy loading on mobile phones could be counter productive to a good browsing experience.

http://www.w3.org/2009/03/image-display-none/test.php

In your CSS file add the following modification.

.lazy-img { display: none; }

Now you can load a page with lazy images like this and they will be indexed.

<body>
   <img class="lazy-img" src="img1.jpeg" title="image title"/>
   <img class="lazy-img" src="img2.jpeg" title="image title"/>
   <img class="lazy-img" src="img3.jpeg" title="image title"/>
   <img class="lazy-img" src="img4.jpeg" title="image title"/>
</body>

It's important that you include the title attribute for the image. Or you surround the <img> tag with a link <a> tag and link text. Otherwise search engines will associate keywords with the image by word distance. You're going to all this trouble for SEO you might as well go all the way.

If you use the above as is. Nothing will show as the images are hidden. You want to remove this class at the bottom of the document. The key here is to use inline pure Javascript. This Javascript is executed immediately after layout of the above elements are finished. If you load all your external JS files at the bottom (as you should). You should place this Javascript block above those files. So that there is no lag in modifying the DOM.

<body>
   <!--[if lte IE 8]
   <style type="text/css">.lazy-img { display: block !important; }</style>
   [endif]-->
   <noscript><style type="text/css">.lazy-img { display: block !important; }</style></noscript>
   <img class="lazy-img" src="img1.jpeg" title="image title"/>
   <img class="lazy-img" src="img2.jpeg" title="image title"/>
   <img class="lazy-img" src="img3.jpeg" title="image title"/>
   <img class="lazy-img" src="img4.jpeg" title="image title"/>
   <![if gte IE 9]>
   <script type="text/javascript">
      var images = document.getElementsByClassName('lazy-img');
      Array.prototype.forEach.call(images, function(image){
         image.setAttribute("data-src",image.getAttribute("src"));
         image.setAttribute("src","loading.gif");
      });
      while(images.length > 0) { images[0].className = ""; }
   </script>
   <![endif]>
</body>

Now I added conditionals for IE9 since it doesn't support getElementsByClassName in 8 and older. What should happen (not tested) is that those browsers will just load the image as is.

The advantage of this approach is it keeps the HTML looking clean from the perspective of the webcrawler.

share|improve this answer
1  
I was curious and tried the test page. Latest Chrome and Safari on Mac do seem to load the image. Not so sure this is very reliable after all, unfortunately... –  PeterVR May 15 at 23:10
    
Unfortunately with this method, the images are all lazy-loaded at the bottom of the document (not bad), but as I am explaining in my question, in my approach the images are lazy loaded only when they enter the viewport. So any image that does not enter the viewport (i.e. the enduser does not scroll thus down in the page) will not get loaded at all. In a page with a lot of images this is really important –  bmenekl May 19 at 7:28
    
@bmenekl No, this answer does not perform lazy loading. It only alters the HTML when viewed in a javascript enabled browser so that a third-party script can perform lazy loading. –  Mathew Foscarini May 19 at 13:09

Google declared to execute JavaScript with their bots, see this post for more explanation.

As documented you mustn't forbid static files to GoogleBot for dynamic crawling.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.