What impact does lazy loading images have on SEO?

Question

Search Engine Optimization

I decided, in order to increase performance, to use Intersection Observer, thus implementing lazy-load.
With the help of this API, I will track the position of the image. Implementation is planned as follows:

<img src="preloader.gif" data-src="real-image-source" alt="alt text" title="title text"/>

At the moment when the picture is on the user's screen, the src attribute will become equal to the data-src attribute . How will it affect SEO if there are all such images? That is, the initial value of the src attribute of ALL images == preloader.gif.
And the second implementation:
Instead of preloader.gif , use a smaller copy of all pictures (5-10px wide). And then in the same way to change the value of the attributes. But I wouldn’t want to, because I’ll have to generate these pictures + twice as many requests to the server.

Answer 1

Users are wildly infuriated