Does google index lazy-loaded images?

Question

I am using React and the library react-lazy-load-image-component

I do show LazyImages on top of the page but I notice that google is not indexing most of those images.

They do index them sometime, but other times not so I am confused.

In my use case I have only one "Post/Article" with the image on top (lazy-loaded) and below the title and the article content.

My React code is very simple

<LazyImage
                            className={'img-responsive'}
                            style={img.style}
                            src={img.src}
                            alt={img.alt}
                            placeholderSrc={
                                'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
                            }
                        />

The html coming from the server is

<span class=" lazy-load-image-background "
      style="background-image:url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==);background-size:100% 100%;display:inline-block"><span
        class="img-responsive" style="display:inline-block"></span></span></a></p>
<h1>Article title</h1>
<p>First paragraph of the article</p>

That does not seem seo friendly to me. I believe this library need to include data-src or something like that in the server-side rendered content as well for the search engines to wait and index the images.

What are your thoughts?

Lazy loading images and effects on SEO which is mostly focused on web results, but also asks about indexing the images themselves. — Stephen Ostermiller, Aug 14 '23 at 15:13
Is this a good approach to image Lazy Loading for SEO? for a way to lazy-load and have images indexed — Stephen Ostermiller, Aug 14 '23 at 15:14

Does google index lazy-loaded images?

0 Answers0