Compress Vite Assets — Smaller Builds, No Plugin Overhead
Compress the images in your Vite project before building — smaller dist/ output, faster deploys, no image plugin slowing down every build.
Quick answer
Drop your Vite project's public/ or src/assets image folder into TinyPixels before building. Vite does not compress images by default, so pre-compressing keeps your dist output lean without an image plugin.
How to compress images before a Vite build
Download and open TinyPixels
Free to install on Mac or Windows — no account needed to start.
Drop your public/ or src/assets folder in
public/ files ship exactly as committed, so compress those directly.
Convert to WebP or AVIF if needed
Get smaller output for hero images and illustrations.
Commit and build
Your dist/ output ships smaller with no plugin config needed.
Vite doesn't compress images by default
Vite's build pipeline bundles, hashes, and optimizes JavaScript and CSS aggressively, but image content passes through largely untouched unless you add a dedicated plugin like vite-plugin-imagemin. That plugin then re-compresses every image on every build, adding real time to CI.
Pre-compressing images locally before committing them sidesteps this entirely — your dist/ output is smaller from the start, and your build stays fast regardless of framework, since this approach works identically whether you're using Vite with React, Vue, Svelte, or vanilla JS.
No image plugin needed
Compress once before committing instead of adding build-time tooling.
Framework-agnostic
Works the same regardless of which Vite framework template you use.
Bulk project processing
Compress your entire public or assets folder in one pass.
Format conversion included
Convert to WebP or AVIF for even smaller dist output.
Pre-compression vs. a build-time Vite plugin
| Approach | Runs | Cost |
|---|---|---|
| vite-plugin-imagemin / similar | Every build, local dev and CI alike | Adds build time proportional to image count, every single time |
| Pre-compress with TinyPixels | Once, before committing | Zero added build time — Vite just bundles an already-small file |
This applies identically whether your Vite project uses React, Vue, Svelte, Solid, or vanilla JS templates — Vite's core asset handling is the same across every framework it supports.
Common mistakes with Vite project assets
Assuming Vite's production build optimizes images
Vite's minification and tree-shaking apply to JS/CSS — image bytes pass through completely unmodified unless a dedicated plugin is added.
Adding vite-plugin-imagemin for a one-time problem
It solves the symptom on every build instead of the cause once — pre-compressing before commit is strictly less total build time across the project's lifetime.
Forgetting public/ needs the same treatment as src/assets
Both folders ship uncompressed by default — auditing only one leaves real savings on the table.
Not testing WebP/AVIF conversion for large hero images
Vite handles any image format identically in an <img> tag — there's no framework-level reason to stick with PNG or JPEG for photographic content.
Frequently asked questions
Does Vite compress images automatically?
No. Vite bundles and hashes imported assets for cache-busting, but it does not compress image content by default. A vite-plugin-imagemin or similar plugin is needed for build-time compression, or you can pre-compress images before they enter the project.
What is the difference between compressing images in public/ vs src/assets in Vite?
Files in public/ are copied to dist/ exactly as committed with no processing. Files imported from src/assets get bundled and hashed by Vite. Compressing images in either location before committing reduces final dist size.
Do image compression plugins slow down Vite builds?
Yes, noticeably for projects with many images, since compression runs on every build. Pre-compressing images locally before committing them avoids this repeated cost entirely.
Can I batch compress my whole Vite 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 Vite build today
Free to start. No credit card, no account, no cloud. See Pro pricing →
Related tools
Optimize Vue Images
Compress images for your Vue app before build.
Optimize Svelte Images
Compress images for your Svelte app before build.
WebP Converter
Convert any format to WebP locally.
Optimize React Images
The same approach for React and CRA projects.
Image Compressor Hub
Every format, platform, and framework in one place.
Optimize Next.js Images
Compress public assets before deploying Next.js.
Optimize Astro Images
Compress images for your Astro site before build.
Optimize Angular Images
Compress images for your Angular app before build.
Read more: Image compression without Webpack or build tools → · Fix your Lighthouse score where it actually matters →