Image lazy loading implemented for below-fold content

Eager-loading all images transfers bytes the user may never scroll to see (ISO-25010 time-behaviour). A product listing page with eight gallery images below the fold can waste 450 KB on initial load — bytes that delay the LCP image, consume mobile data allowances, and increase time-to-interactive on slow connections. The browser's native loading="lazy" attribute costs one attribute; the performance payoff is the elimination of all below-fold image requests until the images actually enter the viewport.

Mark all below-fold images with loading="lazy". Above-fold images must use loading="eager" (or omit the attribute — eager is the default):

<!-- Above fold: load eagerly -->
<img src="/hero.jpg" alt="Hero" loading="eager" />

<!-- Below fold: defer until near viewport -->
<img src="/product-1.jpg" alt="Product 1" loading="lazy" />

With Next.js, loading="lazy" is the default for next/image; the LCP image needs priority to override it:

// src/app/page.tsx
<Image src="/hero.jpg" alt="Hero" priority width={1200} height={600} />
<Image src="/product.jpg" alt="Product" width={300} height={300} /> {/* lazy by default */}

Do not mark the hero or any above-fold image as loading="lazy" — that delays the LCP element and directly degrades Core Web Vitals.