Optimize images: AVIF, WebP, srcset, and modern formats

What's happening

Lighthouse's "Properly size images" and "Serve images in next-gen formats" audits identify two related image issues: shipping images at much larger dimensions than rendered, and shipping JPEG/PNG when AVIF or WebP would be 30-70% smaller. The bytes savings are usually huge — a 2MB hero JPEG can become a 200KB AVIF with no visible quality loss.

Modern browsers all support WebP, and AVIF is in every evergreen browser since 2022. AVIF compresses better than WebP at the cost of slower encoding. Both support transparency and animation, so they're drop-in replacements for PNG and GIF respectively. Chrome DevTools' Network panel shows image dimensions and bytes — the LCP image's bytes determine how fast LCP can be.

Beyond format, the responsive srcset attribute lets browsers pick an appropriately-sized variant based on device pixel ratio and viewport width. Without srcset, every device gets the desktop-resolution image — mobile users on 4G download 2x more bytes than necessary.

Why it matters

Image bytes typically dominate LCP for content-driven pages. The LCP element on news, e-commerce, and marketing sites is usually a hero image. Cutting its bytes by 70% via AVIF + responsive srcset frequently moves LCP from 4s to under 2.5s and lifts the page from failing Core Web Vitals to passing.

Bandwidth cost is the secondary concern. Image-heavy sites can pay thousands per month in CDN egress; format optimization halves that bill. On mobile, big images burn user data plans, which correlates with bounce rate in markets where data is expensive.

Common causes

• Images uploaded as full-resolution JPEG or PNG without conversion to WebP/AVIF.
• Single src attribute used regardless of viewport size — no srcset.
• loading="lazy" missing on below-the-fold images, so they all download upfront.
• Decorative images served with high quality settings (95+) instead of perceptual quality.
• Image CDN not in use — every variant has to be pre-generated and stored.
• next/image, picture, or sizes attribute not configured for responsive variants.
• PNG used for photographs (where JPEG/WebP/AVIF compress 5-10x better).

Detect this on your site

Run a quick scan with the Speed Test. The tool surfaces this exact issue with the records and context needed to apply the fix below.

How to fix it

1. 1

   Audit images with Lighthouse

   Lighthouse's "Properly size images" and "Serve images in next-gen formats" audits list every offending image with bytes saved. Sort by savings — the top three are usually responsible for 80% of the wasted bytes.

2. 2

   Use next/image or an image CDN

   next/image automatically generates AVIF and WebP variants at multiple widths, sets srcset and sizes, and adds loading="lazy" by default. Cloudflare Images, imgix, and Vercel Image Optimization do the same with a URL-based API. Migrate your tags incrementally.

3. 3

   Set fetchpriority and priority on the LCP image

   Mark the hero/LCP image with fetchpriority="high" (or priority on next/image). This bumps it ahead of fonts and analytics in the network queue. The LCP improvement is usually 200-500ms.

4. 4

   Lazy-load below-the-fold images

   Add loading="lazy" to every below the fold. The browser defers their network requests until they approach the viewport. Don't lazy-load above-the-fold or LCP images — that delays LCP.

5. 5

   Configure responsive sizes

   The sizes attribute tells the browser the rendered image width per viewport. sizes="(min-width: 768px) 50vw, 100vw" means 50% of viewport on desktop, 100% on mobile. With srcset, the browser picks the smallest variant that still looks crisp.

6. 6

   Tune AVIF/WebP quality settings

   Default to quality 75 for JPEG/WebP and quality 50 for AVIF (AVIF's quality scale is more aggressive). For photographs, the difference between quality 75 and 95 is invisible to most users at 4-5x the file size. squoosh.app helps you find the floor visually.

7. 7

   Decorative images: use background-image or SVG

   Tiny icons, dividers, and patterns belong in inline SVG or as CSS background-image. They don't trigger LCP, they're cacheable as part of the CSS, and SVGs gzip extremely well.

8. 8

   Validate LCP improvement in field data

   Image fixes affect LCP at the 75th percentile in CrUX. PageSpeed Insights' Origin Summary shows the rolling 28-day field metric. Lab Lighthouse will move immediately; field data takes a few weeks to fully update.

Example

<!-- Responsive AVIF/WebP with JPEG fallback -->
<picture>
  <source type="image/avif" srcset="
    /hero-400.avif 400w,
    /hero-800.avif 800w,
    /hero-1600.avif 1600w" sizes="100vw">
  <source type="image/webp" srcset="
    /hero-400.webp 400w,
    /hero-800.webp 800w,
    /hero-1600.webp 1600w" sizes="100vw">
  <img src="/hero-800.jpg" alt="" width="1600" height="900"
       fetchpriority="high" decoding="async">
</picture>

<!-- Or with next/image (App Router) -->
import Image from "next/image";
<Image src="/hero.jpg" alt="" width={1600} height={900}
       priority sizes="100vw" />

Picture with AVIF/WebP/JPEG fallback chain plus responsive srcset.

Related fixes