WebP in Next.js: next/image Plus Pre-Converted Assets

What next/image already does

The default loader negotiates WebP or AVIF and builds a srcset. For files in /public, the original is still read and transformed. A 4000 px PNG in public/hero.png means every cold start does extra work. Ship hero.webp at 1920 px and set sizes honestly.

Why it matters

• Vercel image optimisation has a transform quota on some plans.
• Self-hosted Next burns CPU on Sharp for every new size.
• RemotePatterns images from CMSs stay huge unless you resize at the source.

How to do it

1. List LCP images and OG images in app/ and public/.
2. Bulk convert them to WebP at the largest sizes width you declare.
3. Point next/image at the .webp (or keep the same basename and update imports).
4. Leave formats: ['image/avif','image/webp'] on; it still helps leftovers.

Settings that work

Heroes 1920 px / 75–80%. Blog covers 1200 px / 80%. Icons as SVG. Quality 80 is the default you should match in the converter so local files look like production.

App Router tip

For statically imported images, Next reads dimensions at build time. WebP imports work the same as PNG. Prefer static imports for above-the-fold heroes so width/height are automatic.