Below-fold images use lazy loading

Eagerly loading below-fold images forces users to download content they may never scroll to — consuming bandwidth, extending Time to Interactive, and degrading performance on mobile or metered connections. On pages with galleries, comment sections, or long lists of testimonials, below-fold images can represent 60–80% of total image payload. This wasted transfer directly increases LCP for above-fold content, since the browser competes for bandwidth across all eager loads. ISO 25010 performance-efficiency.time-behaviour captures this as unnecessary resource acquisition that delays the user's first meaningful interaction.

Add loading="lazy" to all <img> tags that appear below the first major content section. Above-fold images — hero, logo, header — should remain eager or use priority in Next.js Image to avoid delayed LCP. The Next.js Image component applies lazy loading by default unless priority is set.

// Above-fold — load immediately
<img src="/hero.jpg" alt="Hero" width={1200} height={630} />

// Below-fold — defer until near viewport
<img src="/testimonial.jpg" alt="Jane" width={200} height={200} loading="lazy" />

// Next.js: lazy by default, priority for above-fold
import Image from 'next/image'
<Image src="/hero.jpg" alt="Hero" width={1200} height={630} priority />
<Image src="/card.jpg" alt="Card" width={400} height={300} /> {/* lazy by default */}

// Heavy galleries — defer the entire component
const Gallery = dynamic(() => import('./Gallery'), { loading: () => <Skeleton /> })