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 /> })

• ID: performance-load.images.lazy-loading

• Severity: medium

• What to look for: Count all <img> tags and Image components that appear below the fold (after the first major page section). For each, classify as: (a) has loading="lazy", (b) uses a framework component with default lazy loading (Next.js Image), (c) uses a JS lazy loading library, or (d) lacks any lazy loading. Since fold position cannot be determined from static code analysis, apply this heuristic: Images in the first component/section of a page (hero images, header logos) are considered above-the-fold and should NOT have loading="lazy" (or should use priority in Next.js Image). All other images below the first major content section should have loading="lazy". The Next.js Image component uses lazy loading by default — this passes. Plain <img> tags after the first major content section without loading="lazy" fail.

• Pass criteria: At least 90% of below-fold images use loading="lazy", or a framework image component applies lazy loading by default, or a JavaScript lazy loading library is in use. No more than 1 below-fold plain <img> tag lacks lazy loading. Report: "X of Y below-fold images use lazy loading."

• Fail criteria: 2 or more plain <img> tags for non-hero content after the first major section lack loading="lazy" and no lazy loading library is detected.

• Skip (N/A) when: All images are in the first/hero section of the page (0 below-fold images), or lazy loading is handled by the framework automatically for all images, or no images detected in the project.

• Detail on fail: "4 of 6 below-fold images lack loading='lazy' — comments section, testimonials, and footer images loaded eagerly" or "0 of 8 gallery images below the fold have lazy loading configured"

• Remediation: Lazy load off-screen images:

  // Before — loads all images on page load
  <img src="/team.jpg" alt="Team" />
  
  // After — loads only when visible
  <img src="/team.jpg" alt="Team" loading="lazy" />
  
  // Next.js Image with lazy loading
  <Image src="/team.jpg" alt="Team" width={800} height={600} />
  {/* Default behavior is lazy except with priority prop */}
  
  // Dynamic import for heavy image galleries
  const LazyGallery = dynamic(() => import('./Gallery'), { loading: () => <Skeleton /> })
  

• Cross-reference: For image alt text and accessibility concerns with lazy-loaded images, the Accessibility Fundamentals audit covers image accessibility in detail.