Next-gen image formats

What this check looks for

This check classifies each image by content type (or file extension when the content type is unknown) as legacy (JPEG/PNG/GIF/BMP) or next-gen (WebP/AVIF), skipping any <picture> elements that already declare a WebP/AVIF <source> fallback. If at least 3 legacy images are found and they make up more than 50% of the images with a known format, it warns, listing up to 10 legacy images as evidence. If formats couldn't be determined at all, it reports "na"; otherwise it passes.

Why it matters

WebP and AVIF typically produce files 25-50% smaller than an equivalent-quality JPEG or PNG, which compounds directly into faster page loads and better Core Web Vitals scores without any visible quality loss for most photographic or UI imagery. Since this is purely a file-format efficiency question, it isn't itself an AI-visibility signal, but it's a straightforward, low-risk optimization that improves the same page-speed metrics search engines already reward.

How to fix it

Convert legacy raster images to WebP or AVIF, using a <picture> element with a fallback for older browsers if needed:

<!-- Legacy-only -->
<img src="/hero.jpg" alt="Acme wireless headphones">

<!-- Next-gen with fallback -->
<picture>
  <source srcset="/hero.avif" type="image/avif">
  <source srcset="/hero.webp" type="image/webp">
  <img src="/hero.jpg" alt="Acme wireless headphones">
</picture>

Most modern image pipelines (Sharp, Squoosh, CDN image services) can generate these formats automatically at build or request time.