With the latest release of Google PageSpeed v5, we did some hard thinking about how lazy load affects the indexing of images. After doing some digging, it appears this has been a topic of some discussion for the last several years. In February of 2018, John Mueller of Google indicated that Google was going to clarify best practices on how to ensure that images are indexed.
We couldn’t dig up where he later clarified, however an article by Vincent Brossas indicated that you could use the Mobile Web Tester to check to see whether your images were visible for a mobile browser, even when lazy loaded.
Unfortunately, using that mechanism did not result in a positive display of the image, even when the image should have been shown as it was supposed to be within the viewport.
Thus, we have decided to implement this test to see which images are indexed.
We have three test images.
The first lazy loaded test image is a typical lazy loaded image. The image has the src attribute replaced with a 1×1 pixel base-64 encoded transparent PNG image. When the image is detected, on document render, to be within the viewport, then the src is swapped with the data-src attribute.
The second lazy loaded test image is identical to the first, but with a trailing <noscript> block that contains the original image with no lazy loading. This was the method that was indicated by Vincent Brossas. In this test, we append the alt tag in the noscript image with a single word “augmented”.
The third lazy loaded test image is much like the second test, however in this test, we strip the alt attributes from the lazy loaded image. We do this so as to attempt to not provide a duplicate attribute.
The fourth lazy loaded test image is like the third, but instead of the alt tag being stripped from the original lazy loaded image, we strip the alt tag from the noscript tag.
We hope that this test helps clarify which images are indexed. Date of this test is December 15th, 2018.