Optimize Next.js Images — Smaller Deploys, Faster Builds
Compress the images in your public/ folder before deploying — smaller deploy size, faster builds, and a better starting point for next/image.
Quick answer
Drop your Next.js project's public/ image folder into TinyPixels before deploying. It compresses every file in place, reducing deploy size while working alongside next/image's own optimization, not against it.
How to compress images in your Next.js public/ folder
Download and open TinyPixels
Free to install on Mac or Windows — no account needed to start.
Drop your public/ image folder in
Compress the source files next/image will optimize on request.
Convert to WebP or AVIF if needed
Give next/image an even leaner starting point for generated variants.
Commit and deploy
Smaller deploy size ships to Vercel or any host, no config changes needed.
next/image optimizes on request — compress the source first
Next.js's built-in image optimization is excellent at generating responsive, correctly-sized variants on the fly. But it always starts from the source file in your public/ folder — if that source is an unoptimized 8MB export from a design tool, next/image is doing more work than it needs to.
Compressing source images before they land in public/ reduces your repository and deploy size directly, and gives next/image a leaner starting point for every generated variant.
Works with next/image
Compressing the source complements built-in optimization, doesn't conflict with it.
Smaller deploy size
Reduce what ships to Vercel or any host with every deploy.
Bulk public/ processing
Compress your entire static asset folder in one pass.
Format conversion included
Convert to WebP or AVIF sources for even smaller generated variants.
Static export vs. Image Optimization API
How much benefit pre-compression gives you depends on your deployment mode:
| Mode | Effect of pre-compressing public/ |
|---|---|
| Vercel / Node server (default) | next/image optimizes on request from your source — a smaller source means faster first-request generation and smaller cache entries |
| output: "export" (static export) | Files in public/ ship byte-for-byte with no server-side optimization at all — pre-compression is the only optimization that happens |
| Self-hosted with unoptimized: true | next/image passes through untouched — pre-compression is effectively your entire optimization pipeline |
If you're on a static export or have disabled the Image Optimization API for any reason, pre-compressing public/ isn't just a nice-to-have — it's the only compression your images will ever get.
Common mistakes with Next.js public/ assets
Assuming next/image makes source compression unnecessary
The optimizer generates variants from your source on request — an 8MB source still means a slower first generation and a larger disk cache, even if the served output is resized.
Forgetting static exports skip optimization entirely
output: "export" disables the Image Optimization API by default — every file in public/ ships exactly as committed, making pre-compression essential, not optional.
Not compressing OG images and favicons
Open Graph images and app icons in public/ are easy to forget during an image audit, but they're downloaded on every social share preview and browser tab load.
Committing PSD/Figma exports directly
Design tool exports often carry unnecessary color profile data and unoptimized encoding — always compress before committing to public/, not after.
Frequently asked questions
Does next/image already optimize my images?
next/image resizes and re-encodes images on request or at build time depending on configuration, but it still starts from whatever source file you provide in public/. Compressing that source file first means less work for the optimizer and a smaller starting point.
Why compress images before they go in the public/ folder?
Files in public/ are served exactly as committed and count toward your deploy size on platforms like Vercel. Compressing them beforehand keeps deploys smaller and avoids shipping unnecessarily large source files even when next/image is in use.
Does image compression affect next/image's automatic optimization?
No. next/image still resizes and serves responsive variants as configured — you're simply giving it a smaller, already-compressed source to start from, which only helps.
Can I compress my whole Next.js public folder at once?
Yes. Drop your public/ directory into TinyPixels and every image compresses in one pass, ready to commit before your next deploy.
Shrink your Next.js deploy today
Free to start. No credit card, no account, no cloud. See Pro pricing →
Related tools
Optimize React Images
Compress images for your React app before build.
Compress Flutter Assets
Shrink your Flutter app bundle with local compression.
WebP Converter
Convert any format to WebP locally.
Optimize Astro Images
The same approach for Astro's public/ folder.
Image Compressor Hub
Every format, platform, and framework in one place.
Optimize Vue Images
Compress images for your Vue app before build.
Optimize Svelte Images
Compress images for your Svelte app before build.
Optimize Angular Images
Compress images for your Angular app before build.
Read more: Fix your Lighthouse score where it actually matters → · Best image format for websites in 2026 →