next-gen image formats

WebP and AVIF exist to send the same picture in fewer bytes. Google’s studies put lossy WebP at 25 to 34% smaller than JPEG, and lossless WebP 23 to 42% smaller than PNG. web.dev reports AVIF can top 50% savings versus JPEG in some cases. Fewer bytes means faster loading and less mobile data, which feeds straight into Largest Contentful Paint, one of the Core Web Vitals.

How Lighthouse tests it

The “Serve images in modern formats” audit collects every BMP, JPEG, and PNG on the page, converts each to WebP, estimates the AVIF size, and reports the potential savings. It omits any image whose saving is under 8 KiB, so the flag only fires when the payoff is real.

The safe way to serve these formats is the <picture> element. The browser picks the first source it supports and falls back to a legacy file:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="...">
</picture>

An image CDN is the lower-effort path. It reads the browser’s Accept header and returns AVIF, WebP, or the original automatically, with no extra bytes added to your HTML. Support is no longer a blocker in 2026. WebP is “widely available” across all modern browsers, and AVIF is now supported in every major browser, so the legacy fallback is mostly insurance for older clients.