Detailed answer
Lazy loading is useful for images farther down a page that are not immediately needed.
Important first-screen images should usually load normally. Supply dimensions to reserve space and test on a slow connection. Do not assume applying lazy loading to every image always improves the user experience.
Example
<img src="lesson-detail.jpg" alt="An HTML lesson diagram" loading="lazy" width="800" height="600">
Understanding the behavior
Lazy loading is useful for images that are initially far below the visible area. A prominent first-screen image may need immediate loading to avoid delaying the main content. Dimensions should still reserve space regardless of the loading strategy.
Practical implementation notes
Compare the initial network requests and scroll behavior. If the main visual appears late, reconsider lazy loading on that image and measure the actual page rather than applying the attribute to every image.
How to check it
Inspect loading requests on a slow connection while scrolling toward the lower images.
Expected result
Lower images can load near visibility without delaying an important top image.
Watch out: Lazy-loading a prominent first-screen image can delay it.
Read the reference ↗