How can I automatically compress images during React build without breaking the asset paths?

Question

I’m working on a React project using Vite as the build tool.

I’d like to automatically compress PNG and JPEG images when building for production, without changing the image import paths (so that imports like import logo from './logo.png' still work).

I tried using:

vite-plugin-imagemin → works locally but fails in CI due to missing binaries.
sharp in a custom script → changes file names, which breaks imports.

Goal:

Run during vite build
Maintain image filenames and relative paths
Work on Linux CI runners (no GUI dependencies)

Question:
Is there a way to configure Vite (or another plugin) to compress images automatically during build while preserving the original filenames and paths?

Answer 1 · 2025-11-05 19:16:52Z

I recommend using vite-plugin-image-optimizer which is CI friendly

Then you also have to configure vite. All configurations are also available on the npm page.

//example 
import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';
import { defineConfig } from 'vite';

export default defineConfig(() => {
  return {
    plugins: [
      ViteImageOptimizer({
         png: {
          quality: 100,
         },
      }),
    ],
  };
});

Collectives™ on Stack Overflow

How can I automatically compress images during React build without breaking the asset paths?

1 Reply 1

Your Reply

Collectives™ on Stack Overflow

How can I automatically compress images during React build without breaking the asset paths?

1 Reply 1

Your Reply

Sign up or log in

Post as a guest