Modern Image Formats.

WebP/AVIF are 25-50% smaller than JPEG/PNG with same quality

What does this check test?

This check identifies images that could be served in modern formats — WebP and AVIF — instead of legacy JPEG, PNG, or GIF formats. WebP (developed by Google) offers 25-35% smaller file sizes than JPEG at equivalent visual quality and supports transparency (replacing PNG). AVIF (based on the AV1 video codec) offers 30-50% smaller file sizes than JPEG and superior quality at low bitrates. Both formats are supported by all modern browsers: WebP has 97%+ browser support and AVIF has 92%+ support as of 2024.

Why does it matter?

Switching from JPEG/PNG to WebP or AVIF is one of the highest-impact image optimizations available because it reduces file sizes significantly with no visible quality loss. A typical product page with 10 product images at 200KB each (JPEG) could save 500KB-1MB by converting to WebP, dramatically improving page load time. Since images are typically the heaviest resources on a page, format optimization compounds with every image. AVIF particularly excels at low-to-medium quality settings where JPEG shows visible artifacts.

Who is affected?

E-commerce sites with large product catalogs, media-heavy sites, portfolio sites, and any site serving user-uploaded images benefit the most. Sites still serving PNG images for photographic content (common with older CMS platforms) have the largest opportunity for savings. Sites targeting mobile users on limited data plans benefit disproportionately from smaller image sizes.

Where does this apply?

Check all `<img>` elements and CSS `background-image` URLs in Chrome DevTools Network panel — filter by 'Img' and check the 'Type' column for JPEG, PNG, or GIF. Lighthouse flags each image that could benefit from format conversion with the estimated byte savings. The largest images above the fold provide the biggest impact when converted.

How to fix it

<picture>
  <source srcset="/photo.avif" type="image/avif" />
  <source srcset="/photo.webp" type="image/webp" />
  <img src="/photo.jpg" alt="Description" width="800" height="600" />
</picture>

const sharp = require('sharp');

await sharp('input.jpg').webp({ quality: 80 }).toFile('output.webp');
await sharp('input.jpg').avif({ quality: 60 }).toFile('output.avif');

References

• Serve images in modern formats — Chrome Developers
• Using WebP Images — web.dev
• AVIF has landed — Jake Archibald
• sharp — Image Processing Library