The SEO problem
TL;DR: – short story: Lazy loaded images won’t be indexed by search bots like googlebot!
Long story: The purpose of lazy loading images is to speed up a website’s performance without pushing extra HTTP requests through a full page refresh. The goal is to save bandwidth on visitors who may never scroll down far enough to see the freshly-loaded image or visitors who never slide through your image slider etc.
The way lazy loading works is that you with scripting first loads and serves the correct image source when an image is visible in the visitors viewport but googlebot won’t index these images because the correct image source isn’t rendered serversite!
TL;DR: – short answer: Since google started to execute scripting there isn’t any problem anymore. You don’t have to do anything 🙂
Long answer: The first big site I implemented lazy load on was the LEGO Starwars site. The new site had a lot of high-res images and a lot of sliders containing call-to-actions with images. So by lazy loading the images we saved tons of kilobytes and server requests and made the page load much faster. The only downside was that the images wasn’t indexed by any search bot! I tried different approaches:
Solution #1, Image sitemaps (no good)
Create a image sitemap per page with your lazy loaded images:
<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"> <url> <loc>http://dinbror.dk/blazy</loc> <image:image> <image:loc>http://dinbror.dk/lazy-load-images-with-bLazyJS.jpg</image:loc> </image:image> <image:image> <image:loc>http://dinbror.dk/lazy-loaded-image.jpg</image:loc> </image:image> </url> </urlset>
At that time I couldn’t make it to work. My sitemap images wasn’t indexed so I assume that the images in the image sitemap has to be present in the markup before they will be crawled. So image sitemaps are only good for providing extra meta data to an image.
Solution #2, noscript (no good)
Add a noscript tag containing the image for every lazy loaded image:
<img class="b-lazy" src="placeholder-image.jpg" data-src="image.jpg" alt="alt-text" /> <noscript><img src="image.jpg" alt="alt-text" /></noscript>
<noscript>Element defines a section of html to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.
Solution #3, escaped fragments (works but deprecated)
Some months after the site went live the escaped fragments princip was introduced by Google. They proposed a set of practices that webmasters could follow in order to ensure that their AJAX-based applications and lazy loaded images was indexed by search engines. I won’t go in-deep with how it works since it was marked as deprecated October this year (2015). You can read more about it here: https://developers.google.com/webmasters/ajax-crawling/docs/learn-more
Solution #4, do nothing (works)
So now you don’t have any excuse for not lazy loading your images, iframes, games and videos whenever it makes sense.