vite-plugin-image-optimizer icon indicating copy to clipboard operation
vite-plugin-image-optimizer copied to clipboard

Won't optimize any images in "public" with Remix

Open npham-dev opened this issue 1 year ago • 4 comments

Describe the Bug

I'm using Vite with Remix. For some reason, images that are imported in the app directory are optimized, but images in the public directory or not, even when includePublic true.

Steps to reproduce

  1. pnpm create vite & select "Remix"
  2. pnpm add vite-plugin-image-optimizer sharp svgo -D
  3. add ViteImageOptimizer({ includePublic: true }) to vite.config.ts
  4. add some images (or not, Remix comes with a few logos)

Alternatively, clone this repo to reproduce: https://github.com/natmfat/bug-vite-plugin-image-optimizer

> pnpm run build
...
✨ [vite-plugin-image-optimizer] - optimized images successfully:
server/assets/portfolio-home-DOw3Ebwk.png  -73%    cached original: 336.98 kB; cached: 92.32 kB

I expected images in the "public" directory to be transformed as well, not just ones that are imported.

System Info

System:
    OS: macOS 14.6.1
    CPU: (8) arm64 Apple M2
    Memory: 289.22 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.16.0 - ~/.nvm/versions/node/v20.16.0/bin/node
    npm: 10.8.1 - ~/.nvm/versions/node/v20.16.0/bin/npm
    pnpm: 9.6.0 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 129.0.6668.71
    Safari: 17.6
  npmPackages:
    vite: ^5.1.0 => 5.4.8
    vite-plugin-image-optimizer: ^1.1.8 => 1.1.8
    vite-tsconfig-paths: ^4.2.1 => 4.3.2

Used Package Manager

pnpm

Validations

  • [X] Read the docs.
  • [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

npham-dev avatar Sep 26 '24 06:09 npham-dev

The same happens for SvelteKit (^2.7.3)

MrVauxs avatar Nov 18 '24 23:11 MrVauxs

React router 7 is the same

raylax avatar Mar 24 '25 09:03 raylax

Vue 3 in Vite +

Craigy- avatar Mar 24 '25 21:03 Craigy-

I had a similar issue and it seems that pictures in public are optimized if you import them instead of using url inline So this won't work:

  <img
    src="/logo-dark.png"
    alt="Remix"
    className="hidden w-full dark:block"
  />

But if you do

import logoDark from '/logo-dark.png'
  <img
    src={logoDark}
    alt="Remix"
    className="hidden w-full dark:block"
  />

Then it will optimize it. But there is another problem with static files in public in Vite being resolved as root path at dev, but when building it will throw an error. I am not sure how to solve it best, I just ignore dev time warning and use ../../public path in my case.

anguzo avatar Apr 02 '25 10:04 anguzo