Won't optimize any images in "public" with Remix
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
pnpm create vite& select "Remix"pnpm add vite-plugin-image-optimizer sharp svgo -D- add
ViteImageOptimizer({ includePublic: true })to vite.config.ts - 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.
The same happens for SvelteKit (^2.7.3)
React router 7 is the same
Vue 3 in Vite +
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.