Images far below the initial viewport can wait until a reader scrolls near them. Native loading="lazy" lets the browser defer those downloads without a JavaScript observer.
<img src="diagram.webp" alt="A simple network diagram" loading="lazy" width="1200" height="800">Do not lazy-load the first important image
- Use loading="eager" or omit lazy loading for the likely largest contentful image.
- Provide width and height, or an aspect ratio, so the layout reserves space before the file arrives.
- Use responsive sources when multiple image sizes are available.
Measure on the real page
Browsers choose when to fetch a lazy image, so do not treat it as an exact network schedule. Check the main-content image's loading priority and confirm lower images do not shift text when they appear.
The goal is to avoid unnecessary early downloads while protecting the first meaningful view. Apply lazy loading selectively, not as a blanket rule for every image.
