Image Optimization for Web Performance

Images are usually the heaviest asset on a page. Optimizing them is the single biggest performance win available. This guide covers modern formats, responsive loading, CDN tricks, and real benchmarks you can reproduce.

The 4 levers of image performance

1. Format — WebP or AVIF over JPG/PNG
2. Dimensions — never serve a 4K image to a 375px phone
3. Compression — quality 75-85 is indistinguishable from 100
4. Loading strategy — lazy-load below the fold

Measure before you optimize

Run Lighthouse or WebPageTest. Your Largest Contentful Paint (LCP) is almost always an image. If LCP is over 2.5s, image optimization is the fastest fix.

Use modern formats

Same 1920×1080 photo:

• JPG quality 85 — ~300 KB (baseline)
• WebP quality 80 — ~100 KB (67% smaller)
• AVIF quality 60 — ~60 KB (80% smaller, slower encode)

Browser support for WebP is now universal. AVIF covers 90%+ of global users.

Responsive srcset with <picture>

<picture>
  <source type="image/avif" srcset="
    hero-400.avif 400w,
    hero-800.avif 800w,
    hero-1600.avif 1600w
  " />
  <source type="image/webp" srcset="
    hero-400.webp 400w,
    hero-800.webp 800w,
    hero-1600.webp 1600w
  " />
  <img
    src="hero-800.jpg"
    srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
    sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
    alt="Hero"
    loading="lazy"
    decoding="async"
  />
</picture>

Next.js Image component

import Image from 'next/image';

<Image
  src="/hero.jpg"
  width={1600}
  height={900}
  alt="Hero"
  priority
  quality={85}
/>

Next.js automatically serves WebP/AVIF, generates responsive srcsets, and lazy-loads off-screen images.

Testing with sample files

Validate your optimization pipeline with:

• JPG photos — baseline for real-world photos
• PNG with transparency — compare against WebP lossless
• WebP samples — verify browser decoding speed
• SVG vectors — for icons and logos (usually smaller than PNG)

CDN tricks

• Set Cache-Control: public, max-age=31536000, immutable on content-hashed URLs
• Use a CDN that auto-negotiates AVIF/WebP based on Accept header
• Serve from the same origin when possible to avoid a second DNS lookup

Related

For format-by-format details, read WebP vs PNG vs JPG. For icons specifically, see SVG vs PNG for icons.