Serve Images in Next-Gen Formats

JPEG dates from 1992 and PNG from 1996. Both are still perfectly valid formats, but two newer ones, WebP and AVIF, use modern compression techniques that produce visually equivalent images at meaningfully smaller file sizes. That's exactly what this audit is checking for.

What it means

Lighthouse re-encodes each JPEG/PNG/BMP image on the page as WebP at the same visual quality and compares the byte sizes. If the next-gen version would be smaller by more than a small threshold, it flags the original as an opportunity, together with the estimated savings.

Why it matters

Real-world tests generally show WebP producing 25 to 35 percent smaller files than a comparable-quality JPEG, and AVIF pushing that further to 30 to 50 percent in many cases, especially on photographic content. That's a direct reduction in bytes over the wire with no visible quality loss, which speeds up LCP whenever the affected image is the LCP element, and reduces total page weight either way. It's a separate lever from properly sizing images: format changes the compression, dimensions change the byte count for a given size, and most images benefit from doing both.

How to fix it

Serve the next-gen format to browsers that support it, and fall back to the original for the few that don't, using <picture>:

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

The browser checks each <source> in order and uses the first format it supports, falling back to the plain <img> if none match, with no JavaScript and no user-agent sniffing required.

• Most build tools and image CDNs can generate WebP/AVIF variants automatically from a single source image (Squoosh, sharp, ImageMagick, or your CDN's automatic format negotiation via the Accept header).
• If your CDN supports content negotiation (serving WebP/AVIF automatically based on the request's Accept header), you may not need the <picture> markup at all; check its documentation before hand-rolling this.
• AVIF compresses better than WebP in most cases but encodes more slowly and has marginally less universal support; WebP is the safer default if you have to pick one.

How to verify

Re-test the page. The audit should list fewer (ideally zero) images with next-gen savings available. In DevTools' Network tab, filter by "Img" and check the "Type" column to confirm the browser actually requested the .webp/.avif file rather than falling through to the original.