Skip to content

Modern image formats

lowperformance-modern-imagesreviewed

WebP and AVIF carry the same picture in a fraction of the bytes. What the trade-offs are, and the markup that keeps a fallback for old browsers.

What it is

This check looks at the images a page actually loaded and counts the ones still served as PNG or JPEG where a modern format would do the same job smaller.

WebP and AVIF are both lossy-or-lossless formats with substantially better compression than JPEG and PNG. WebP is supported everywhere that matters and is the safe default; AVIF compresses harder still and encodes more slowly.

Why it matters

Images are usually the largest thing on a page by bytes, which makes them the largest single lever on load time — and the one that requires no architectural change, only re-encoding.

It also lands directly on Largest Contentful Paint, because the LCP element is so often a hero image. Halving that file's size moves the metric Google actually measures, on the element that defines it.

How to fix it

with a reference doc
html
<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="…" width="1200" height="800">
</picture>
next/image
// next/image negotiates the format per request; no <picture> needed
import Image from "next/image";

<Image src="/photo.jpg" alt="…" width={1200} height={800} />

Reference documentation

Related checks

4
highLargest Contentful Paint (LCP)Largest Contentful Paint (LCP) measures the time from navigation start until the largest image or text block in the viewport has rendered — a stand-in for 'when does this page feel loaded' rather than 'when did the first byte arrive'. It's one of Google's three Core Web Vitals.lowCache headers on static assetsThis check looks at the static assets a page loaded — stylesheets, scripts, images, fonts — and asks whether each one came back with a Cache-Control header that lets the browser keep it.highCumulative Layout Shift (CLS)Cumulative Layout Shift (CLS) scores how much visible content unexpectedly moves during a page's lifetime, weighted by how much of the viewport shifted and how far. A score under 0.1 is good; 0.1-0.25 is graded medium here, above 0.25 is high.mediumImage alt textEvery <img> should carry an alt attribute: a text description for informative images, or an empty alt="" for images that are purely decorative. This check reads it directly out of the HTML the server sent, so it runs on every scan regardless of whether a rendering engine is available.

This is one of the 75 checks the scanner runs. See what we check for the full list, every severity weight, and how the score is computed from them.

See whether your own site passes modern image formats.

One page, all 75 checks, free. No account, no card.

Check this on my site