Compress Image for Next.js Image Component (Source)
Next.js generates responsive variants — supply a clean, high-quality source.
Your images stay on your device. Nothing is uploaded.
The Next.js <Image> component (via next/image) automatically generates responsive srcsets at build or request time. That means you supply one high-quality source and Next handles per-viewport delivery.
This preset produces a 2400 px JPEG at quality 88 — a clean source that Next.js can downscale losslessly per viewport.
Related tools
Frequently asked questions
- How much can I shrink images for Next.js Image component source?
- Typical reductions are 60–85% with no visible quality loss using the defaults on this page. The Next.js <Image> component (via next/image) automatically generates responsive srcsets at build or request time. That means you supply one high-quality source and Next handles per-viewport delivery.
- What format is best for Next.js Image component source?
- For Next.js Image component source the preset above outputs JPEG at quality 88 — the sweet spot for this workflow's LCP and CWV budget.
- Will compression break transparency or animation?
- Transparency is preserved when the output format supports it (PNG, WebP, AVIF). Animation is preserved for animated WebP. JPEG output flattens transparency to white.
- Can I compress dozens of images at once?
- Yes — use the bulk compressor. Drop a folder or multi-select files; the queue processes them in order with progress per file, and you can download all results as a ZIP.
- Do my images get uploaded anywhere?
- No. The tool runs entirely in your browser — important for client work, internal assets, and anything not yet published.
Optimise the rest of your Next.js Image component source assets.
Use the bulk compressor to process a folder in one go. Everything runs locally.
Start compressing