Image optimization and modern formats (WebP, AVIF)What it checks and how to fix it

What it checks

Looks at the file extension of every image on the page. Passes when at least one image is WebP or AVIF or the page uses picture elements, warns when every recognizable image is JPEG, PNG or GIF, and is skipped on pages without images.

Why it matters

Images are usually the heaviest part of a page. WebP is typically 25 to 35 percent smaller than an equivalent JPEG or PNG and AVIF smaller still, so sticking to legacy formats makes pages slower to load, hurts Largest Contentful Paint and costs mobile visitors data.

How to fix it

Serve images as AVIF or WebP, keeping a JPEG or PNG fallback for old browsers with <picture>:

<picture>
  <source srcset="/images/hero.avif" type="image/avif">
  <source srcset="/images/hero.webp" type="image/webp">
  <img src="/images/hero.jpg" alt="Product screenshot" width="1200" height="630">
</picture>

Convert existing files at build time (for example cwebp -q 80 hero.jpg -o hero.webp) or let an image CDN do it. Cloudflare can convert on the fly with Polish (WebP) or Image Transformations. In Rails, Active Storage variants can produce WebP:

image_tag product.photo.variant(resize_to_limit: [1200, 1200], format: :webp)