Images are normally one of the main factors of bad times loading webpages. For that reason, instead of loading all the images when opening a page, it's common practice to defer the load of some images until the moment the user is just about to see them, which is more efficient and shouldn't be too perceivable. This is what is known as lazy loading. However, lazy loading can be challenging for SEO too. How should be done right in order to get images properly indexed by Google?
Googlebot doesn't use "scroll"
The old fashion way of lazy loading images was based on scroll events. In other words, intercepting the vertical movement of the page. However, this isn't good for SEO, because Googlebot doesn't scroll. If you load images with scroll and Google doesn't see your images, then it won't see the full value of your page either. Or, even worse, it could see bad or broken images.
Based on Google's documentation, the good SEO friendly way of lazy loading images should use the viewport instead. That's like saying: ignore for this purpose the movement of the page, just take into consideration what the user is actually seeing (that's the viewport).
To ensure that Googlebot sees all content on your page, make sure that your lazy loading implementation loads all relevant content whenever it is visible in the viewport.
That translates into:
- If you're a developer and you're coding your own lazy loading methods, avoid scroll events.
- If you're using a third party library, make sure it's updated and it works well without scroll events.
Lazy loading methods that work with SEO
Intersection Observer API
On one hand, Google mentions (a lot) the Intersection Observer API. This is something implemented in modern browsers that lets your page know how close is the user of seeing something. However, this is very modern and not compatible with old browsers or Internet Explorer (but compatible with the new evergreen Googlebot). So, to make sure that the site will work well with all users, you need to include a polyfill, which is an alternative method for those browsers who don't work with the API. You could also use a library entirely based on Intersection Observer API.
Lazysizes and good libraries
On the other hand, for SEO, you don't really need to use the IntersectionObserver API to load images without scroll events. This is an important point that Google hasn't always made totally clear, but after some changes in its documentation, it is now better explained. For instance, the popular Lazysizes library doesn't actually use the Interesection Observer API in its main source, but it does work well without scroll events (in its latest version). Yes, there is another version of this library that does include the API, but it isn't the main one and its developer isn't a big fan of this method (see discussion here and here).
An <img> attribute: loading="loazy"
Finally, there is a third option: adding loading="lazy" as an attribute to your images. No API and no need of using libraries or complex Javascript. Just the attribute. However, this is absolutely cutting edge, as currently is only supported by Chrome (from version 75). This means that it's being picked by Googlebot (good for SEO!), but you really need to provide compatibility for other versions/browsers/users. Addy Osmani suggests here a solution that I think is ideal: try to use loading="lazy" by default, but if not supported, then load a library like Lazysizes.
Test and make sure your lazy images can be seen by Google
Finally, even if you think you have implemented well your lazy loading, it's heavily recommended to test how Googlebot sees your images. Again, Google's documentation shows you how to do it, although it can get a bit technical. You need to install Node.js and download this folder from Google with examples for Puppeteer (Puppeteer is a version of Chrome for testing purposes).
You need to open your Terminal/Shell/Command Line from the examples folder and execute the lazyimages_without_scroll_events.js script with this instruction:
node lazyimages_without_scroll_events.js -h -s -u https://www.pageyouwant.com/totest
If it's the first time you use this script, then you probably need to install first some dependencies. You have to type npm i for that.
This will generate an html page in that folder that compares how your images load with and without scroll. If the non-scroll version looks too different or just bad, then you need to fix your implementation of lazy loading for SEO.
If you're an SEO, this test is something you really need to do. Otherwise, it can be a bit complicated to test lazy loaded images, as other tools from Google (URL Inspection Tool from Search Console) don't show you the full height of your page.
For more info: