Browser-based lazy loading

In 2019, it was finally added the ability to lazy load images at the browser level. All you need to do is add a special loading attribute to the img tag with one of three options (lazy. eager or auto).

Full description here.

However, in my opinion, this is not the best way for several reasons. Firstly, each browser engine decides when to load a picture, so your expectations might not match reality. Secondly, each img-tag MUST have the width and height, otherwise the results can be unpredictable. Up to the fact that the browser will load everything at once, and this is tantamount to not using lazy loading at all. Why? Well, third, as of December 2022, not all browsers are still capable.

Open DevTools and watch for the "Network" tab. As you scroll, requests to the server should appear as you move down.