Images use lazy loading

Images are typically the largest assets on a page. Without lazy loading, every image below the fold downloads on initial page load — including images the user may never scroll to. On an image-heavy page, this can add multiple megabytes to the initial payload, directly increasing Time to Interactive. ISO 25010 performance-efficiency applies: loading offscreen resources wastes bandwidth and delays rendering of visible content. The loading='lazy' attribute is a native browser feature with no JavaScript dependency, universally supported in modern browsers, and requires zero additional infrastructure to use.

Add loading="lazy" to images that appear below the fold. This is a single attribute change with no JavaScript required:

<!-- Below-the-fold images — lazy load -->
<img src="feature.jpg" alt="Feature diagram" loading="lazy" width="800" height="600">

<!-- Hero/above-the-fold image — do NOT lazy load -->
<img src="hero.jpg" alt="Hero" loading="eager">

In Next.js, the <Image> component applies lazy loading by default — loading="eager" must be set explicitly for the hero. For responsive sizing, add srcset and sizes to avoid serving oversized images to small viewports. The width and height attributes prevent layout shift (CLS) by reserving space before the image loads.