Why Your Images Slow Your Lighthouse Score

The Diagnosis

Lighthouse warns about images for three reasons:

Step-by-Step: Fix Every Image Problem

Step 1: Use Next.js Image component

import Image from 'next/image'

// ❌ Bad
<img src="/product.jpg" /&gt;

// ✅ Good
<Image 
  src="/product.jpg"
  width={800}
  height={600}
  alt="Product"
  sizes="(max-width: 768px) 100vw, 50vw"
/&gt;

Step 2: Serve modern formats

<Image
  src="/product.avif"  // AVIF &gt; WebP &gt; JPEG
  alt="Product"
  width={800}
  height={600}
/&gt;

Step 3: Lazy load (automatic in Next.js) Images not in viewport aren't loaded until needed.

Step 4: Set explicit dimensions

// Always set width/height to prevent layout shift (CLS)
<Image width={800} height={600} ... /&gt;

Step 5: Optimize images before uploading

The 80/20 Fix

Do these two things first:

1. Switch to Next.js Image component (fixes 50% of issues)
2. Convert images to WebP (fixes 30% of issues)

That's 80% of the value for 20% of the work.

Checking Your Score

# Run Lighthouse
npx lighthouse https://yoursite.com --view

# Or use Web Vitals extension

Resources