Skip to content

Performance · Next.js (App Router)

Should I use WebP or AVIF instead of JPEG in Next.js (App Router)

WebP is typically 25–35% smaller than JPEG at the same visual quality, and AVIF more again. Support is universal now. On an image-heavy page this is usually the single largest download saving available, and it requires no design change.

The fix for Next.js (App Router)

13x detects your framework from the response and hands you this version rather than the generic one — below 50% confidence it hedges and gives you the generic one instead.

next/image converts to WebP or AVIF automatically based on the request's Accept header, so switching to it fixes this without touching your source images:

tsx code
import Image from "next/image";

<Image src="/hero.jpg" width={1200} height={630} alt="…" />
// Served as AVIF or WebP depending on the browser

To prefer AVIF:

ts code
// next.config.ts
const nextConfig: NextConfig = {
  images: { formats: ["image/avif", "image/webp"] },
};

On a different stack? The general version of this fix explains what 13x checks and why it matters, without assuming a framework.

Check your Next.js (App Router) site

113 deterministic checks against your live URL, in about 30 seconds. Framework detected from the response, so every fix comes back in the form your stack actually uses.

No signup. Results in 30 seconds.