Does Next.js automatically optimize images in the public folder?

No — files in public/ are served as-is with zero optimization. Only images rendered through the next/image component get automatic resizing and modern formats. A 3MB PNG in public/ ships as a 3MB PNG to every visitor, which is why pre-optimizing assets locally before commit matters.

Should I use WebP or AVIF in Next.js?

Configure both: 'formats: ["image/avif", "image/webp"]' in next.config lets next/image serve AVIF first with WebP fallback. For pre-optimized static assets, WebP is the safer default (broader tooling, faster encodes); AVIF wins maximum compression for hero images you hand-tune.

What image size should I export for the web?

Export at the largest size actually displayed (measure, don't guess): heroes typically 1200–1920px wide, thumbnails 400–800px, and never ship 4K source files to browsers. A 1920px WebP at quality 80 usually lands 100–200KB — versus megabytes for the PNG it replaces.

How do I batch convert 100+ images to WebP?

Two honest paths: a Sharp script ('sharp(input).resize(w).webp({quality:80}).toFile(out)') wired into your build, or a desktop batch converter with a saved 'web-80' recipe (resize cap + WebP q80) run over the assets folder before commit. Verify a sample at 100% zoom — text-heavy graphics need quality 85–90.

Why is my Next.js LCP still slow after using next/image?

Usual suspects: the hero lacks the priority prop (add it — it preloads the image), no sizes attribute (browser downloads oversized variants), a remote image without a loader config, or the source itself is a multi-MB file the optimizer can only do so much with. Fix the source first, then the props.

← Back to Complete Guide

Batch WebP Assets for Next.js & React: Core Web Vitals Guide

Q: How do images hurt Core Web Vitals?

Oversized hero images are the #1 cause of bad LCP (Largest Contentful Paint): the metric waits on your biggest visible image. Un-sized images cause CLS (Cumulative Layout Shift) when they pop layout on load. Fixes: right-sized modern formats, explicit width/height, priority on the hero, lazy everything else.

Your Lighthouse score has one dominant lever and it's the hero image. The local-first workflow: right-sized WebP assets, the public/ trap, next/image done right, and batching 100+ files before they ever reach git.

By Hadi Karaki, maker of FormatifSeptember 16, 202610 min read

The trap: public/ ships whatever you commit

Next.js optimizes only images rendered through next/image. Everything in public/ — referenced by plain <img>, CSS, favicons, OG images — ships byte-for-byte, including that 3MB designer PNG. The fix is a pre-commit habit, not a plugin:

Export at displayed size (heroes 1200–1920px, thumbs 400–800px) — never ship 4K sources.
WebP quality 80 default; 85–90 for text-heavy graphics; AVIF hand-tuned for heroes.
Keep the PNG/JPG master out of the repo; commit only the optimized delivery file.

Quick Solution

Assets folder → web-ready in one pass.

Sharp scripts work, but someone has to write and maintain them per project. Formatif Pro ($8.95 one-time) runs a saved “web-80” recipe over any assets folder — resize cap, WebP at quality 80, per-file before/after sizes — offline, no build-step dependency, no per-image fees. Re-run before every release.

Download free trial

next/image done right (4 props that fix most LCP fails)

next.config — serve AVIF first, WebP fallback

images: { formats: ["image/avif", "image/webp"] }

priority on the hero image only — it preloads the LCP element; putting it everywhere backfires.
sizes matching your layout so browsers fetch the right variant, not the largest.
Explicit width/height (or fill with a sized parent) to kill layout shift (CLS).
placeholder='blur' with a tiny blurDataURL for perceived speed on slow networks.

Still failing LCP after all four? The source file is the problem — no props fix a 4MB hero. Shrink the source (above), then re-test. For format fundamentals, see our WebP vs AVIF guide.

The 100-file path: script vs batch app

Sharp one-liner per file (sharp(input).resize(1600).webp({quality: 80}).toFile(out)) wired into a build script is free and version-controlled — best when the whole team runs Node. A desktop batch run is best when assets arrive from designers as chaotic folders: same resize + WebP-80 recipe, visual spot-check at 100% zoom, done in minutes with no code to maintain.

Web performance image questions, answered

Does Next.js optimize public/ images?

No — public/ ships as-is. Only next/image outputs get resizing and modern formats. Pre-optimize before commit.

WebP or AVIF in Next.js?

Both: formats: ['image/avif', 'image/webp']. WebP default for assets, AVIF hand-tuned for heroes.

How do images hurt Core Web Vitals?

Oversized heroes wreck LCP; unsized images cause CLS. Right-sized modern formats + width/height + hero priority.

What export size for web?

Largest displayed size: heroes 1200–1920px, thumbs 400–800px. 1920px WebP q80 ≈ 100–200KB.

Batch 100+ images to WebP?

Sharp script in build, or saved 'web-80' batch recipe over the folder. Spot-check text graphics at 100%.

LCP still slow with next/image?

Hero priority prop, sizes attribute, loader config — then shrink the source file itself. Props can't fix 4MB.

Keep learning

WebP vs AVIF

Compression, support, and when each format wins.

MP4 to animated WebP

Animated docs assets without 50MB GIFs.

Batch watermark

Protect image assets across whole folders, offline.

Green Lighthouse, every release.

Formatif Pro ($8.95 one-time) and Formatif AI ($12.95 one-time) handle video, image, and audio conversion offline — with batch workflows, no file size limits, and a 3-day free trial.

Download free trial Read: WebP vs AVIF

Sharp scripts are free and version-controlled — pick whichever fits how your assets arrive.

Written by

Hadi KarakiLinkedIn

Founder of Formatif, a local-first offline media processing suite for Windows and Linux. Hadi writes about video, image, and audio formats, compression, and privacy-first desktop workflows.