Image Optimization for Web Performance

Images can contribute substantially to page weight and Largest Contentful Paint. This guide focuses on measuring the actual page, changing one image variable at a time, and recording enough detail to reproduce the result.

The 4 levers of image performance

1. Format — compare JPEG, PNG, WebP, or AVIF for the actual source
2. Dimensions — never serve a 4K image to a 375px phone
3. Compression — choose the lowest setting that meets the product's visual target
4. Loading strategy — lazy-load below the fold

Measure before you optimize

Run Lighthouse or WebPageTest and identify the actual LCP element. If it is an image, record its source bytes, rendered dimensions, transfer size, cache state, and LCP before changing format, dimensions, compression, or loading behavior.

Use modern formats

Encode the same lossless source with documented encoder versions and options. Record output bytes and a consistent visual-quality measure; quality numbers are not directly comparable across codecs.

Use JPG, WebP, and AVIF samples to test decoding and pipeline behavior. Check the project's supported browser matrix before changing the production fallback chain.

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

The default Next.js image optimizer can generate responsive sizes and serve configured modern formats based on the request Accept header. WebP is the default output format; AVIF must be enabled in the images.formats configuration. Static exports require an appropriate custom loader or unoptimized images because the on-demand optimizer is not present.

See the current Next.js Image documentation for the deployment-specific configuration.

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.

Sources

• Next.js Image component and optimization configuration