Lazy loading images and effects on SEO

seo google-search javascript images google-image-search

10,976

Solution 1

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>

Solution 2

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.

Solution 3

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.

10,976

bmenekl

Updated on September 18, 2022

Comments

bmenekl over 1 year
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?
- Martijn almost 10 years
  
  I think proper title and alt are 90% of the job. Filename less. It can affect the results in Google Images I guess
- Salman A almost 10 years
  
  see also: webmasters.stackexchange.com/questions/26190/…
- Stephen Ostermiller almost 10 years
  
  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?
- bmenekl almost 10 years
  
  @StephenOstermiller my primary concern is the rankings, but any effect (immediate or secondary) to the SEO is of interest
- bmenekl almost 10 years
  
  It is almost the same, since they leave the initial src attribute blank which is surely worse than having it filled-in but with the same url (such as in my question)
- mindplay.dk over 9 years
  
  Here's a thought: an <img> tag without a src attribute isn't really a valid <img> tag in the first place, so why use <img> tags in the first place? Perhaps better to use something else, like a <div> or <span> with a specific class and/or data-attribute(s) - or even an <a> tag with the href actually pointing to the image URL, for the sake of validity and search engine indexing. Since you have to process/initialize them in JS anyhow, I think this is probably better/safer than using mangled/invalid <img> tags.
Pevara almost 10 years

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...
bmenekl almost 10 years

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
Reactgular almost 10 years

@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.
John Mueller almost 10 years

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.
dhaupin over 9 years

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.
I am the Most Stupid Person over 6 years

Is this answer valid for 2017 also? Specially "Google will not be able to index lazy loaded images for image search. " part? So even we have 10 images in the post, Google think we have no images?
Stephen Ostermiller over 6 years

That is still the case, but you can still link to your images to get them indexed.