Modern image elements (picture, srcset)What it checks and how to fix it

What it checks

Looks at how the page serves images: srcset and sizes, picture elements, WebP or AVIF files, and explicit width and height. On pages with more than 3 images it flags responsive images (srcset or picture) on fewer than 20% of them, and no WebP or AVIF at all. It passes with at least two good practices and no issues, and warns otherwise; pages without images pass.

Why it matters

Serving one large JPEG or PNG to every device makes phones download desktop-sized files. WebP and AVIF are typically 25-50% smaller than JPEG at the same quality, and srcset lets the browser pick the right size, which directly improves load time and Largest Contentful Paint. Width and height attributes reserve space and prevent layout shift.

How to fix it

Serve modern formats with a fallback, and let the browser choose the size.

<picture>
  <source type="image/avif" srcset="/img/hero-800.avif 800w, /img/hero-1600.avif 1600w">
  <source type="image/webp" srcset="/img/hero-800.webp 800w, /img/hero-1600.webp 1600w">
  <img src="/img/hero-1600.jpg" alt="Product screenshot"
       srcset="/img/hero-800.jpg 800w, /img/hero-1600.jpg 1600w"
       sizes="(max-width: 800px) 100vw, 800px"
       width="1600" height="900">
</picture>

Convert existing images with cwebp or avifenc, or let a CDN do it: Cloudflare Polish / Image Resizing and most image CDNs negotiate WebP and AVIF from the Accept header automatically.

In Rails with Active Storage, generate variants in a modern format: image.variant(resize_to_limit: [800, 800], format: :webp).