Optimize React Images — Before They Ever Reach Your Bundle
Compress the images in your React project before building — smaller bundle size, faster Lighthouse scores, no Webpack plugin overhead.
Quick answer
Drop your React project's src/assets or public/ image folder into TinyPixels before building. It compresses every file in place, shrinking your bundle without adding a build-time image plugin.
How to compress images before a React build
Download and open TinyPixels
Free to install on Mac or Windows — no account needed to start.
Drop your src/assets or public/ folder in
Compress bundled or statically served images the same way.
Convert to WebP or AVIF if needed
Get smaller output for hero images and illustrations.
Commit the compressed files
Your next build ships with no extra Webpack plugin overhead.
Why pre-build compression beats a Webpack plugin
Build-time image minimizer plugins re-compress every image on every build, adding time to your CI pipeline for work that only needs to happen once. Compressing images locally before committing them keeps your build fast while still shipping optimized assets.
This matters most for design-heavy React apps with many hero images, illustrations, and screenshots — exactly the assets most likely to be exported at higher resolution or quality than the page actually needs.
No build-time overhead
Compress once before committing — no plugin slowing down every CI run.
Works for src/ and public/
Compress bundled assets or statically served files the same way.
Bulk project processing
Compress your entire image folder in one pass.
Format conversion included
Convert to WebP or AVIF for even smaller bundle output.
How the common React build tools handle images
| Tool | Image handling |
|---|---|
| Create React App (Webpack) | Copies public/ as-is, inlines small src/ imports as base64 — no compression either way |
| Vite | Copies public/ as-is, hashes and copies src/ imports — same, no re-encoding by default |
| Webpack image-minimizer-webpack-plugin | Re-compresses on every build — works, but adds time to every CI run |
Whichever bundler you use, none of them re-encode image content by default — they copy or hash files as provided. Pre-compressing removes the need for a build-time plugin entirely, regardless of which tool you're on.
Common mistakes with React project images
Importing full-resolution hero images from src/assets
Bundlers will happily inline or hash a 5MB hero image without complaint — compress before import, since the bundler won't catch it for you.
Forgetting public/ images entirely
Files in public/ bypass the bundler completely and are served byte-for-byte — they need the same pre-compression pass as bundled assets, just via a different folder.
Adding a Webpack image plugin instead of pre-compressing
Re-compressing on every build adds time to every CI run and local dev build for work that only needs to happen once per image.
Not converting to WebP/AVIF for large hero and background images
React doesn't care what format an <img> tag points to — WebP/AVIF conversion is free bundle-size savings with no framework-level blocker.
Frequently asked questions
Do I need a Webpack plugin to compress images in React?
No. Webpack image-minimizer plugins work but add build time to every CI run. Compressing images once locally with TinyPixels before committing them means your build pipeline stays fast and doesn't need to re-compress on every deploy.
How do unoptimized images affect a React app's Lighthouse score?
Significantly. Large hero images, illustrations, and screenshots directly hurt Largest Contentful Paint and overall page weight, both of which factor into Lighthouse performance scoring.
Should I compress images in src/assets or public/?
Both. Images imported from src/assets get bundled by your build tool, while files in public/ are served as-is. Compressing images in either location before committing reduces final output size either way.
Can I batch compress my whole React project's images at once?
Yes. Drop your assets or public image folder into TinyPixels and every file compresses in one pass, ready to commit before your next build.
Shrink your React bundle today
Free to start. No credit card, no account, no cloud. See Pro pricing →
Related tools
Optimize Next.js Images
Compress public assets before deploying Next.js.
Compress Flutter Assets
Shrink your Flutter app bundle with local compression.
WebP Converter
Convert any format to WebP locally.
Optimize Vue Images
The same approach for Vue and Vite projects.
Image Compressor Hub
Every format, platform, and framework in one place.
Optimize Svelte Images
Compress images for your Svelte app before build.
Optimize Astro Images
Compress images for your Astro site before build.
Optimize Angular Images
Compress images for your Angular app before build.
Read more: Fix your Lighthouse score where it actually matters → · How to reduce image file size without losing quality →