Am I missing something? Converting images on build

[EmmeMax]

Hi everyone!
Maybe I'm asking something stupid, but I can't figure it out myself...so sorry in advance.

I'll explain the situation as quickly and in detail as possible.
I'm building a website with vite+react+js and I have all the images that I use in src/public/images. I use them in .scss imported with ulr() or .jsx imported directly in animg tag as <img src={src} alt="" />.
I have .jpg or .png images and I want them all converted in .webp during build, but I don't know how to start with vite-imagetools, I get that I have to import the plugin in vite.congif.js but I don't know how to use the defaultDirectives or set anything at all :(.
Do I have to import the images as import imgUrl from './img.png'? I'm fine with changing my code if I have to.

I read the docs/discussions but maybe I'm missing the point and imagetools is not the solution to my problem.

Thank you for your kind help <3

[benmccann]

There's an example here: https://github.com/JonasKruckenberg/imagetools/tree/main/examples

This library is often used to build image components. E.g. in Svelte you can use @sveltejs/enhanced-img to make things much easier. It uses this library under the covers. I'm not that familiar with React though

[EmmeMax]

Thank you for your immediate response!
So it doesn't convert the images in another format? I read the example in React or the docs but there aren't great examples and sadly for me it's not clear how to use the library :/

Anyway, thank you again!

[benmccann]

It does convert the images to another format on build

[EmmeMax]

It does not seem to do so, I've tried to import the images and it works but on build the images are stille .png :(
Thank you for your help, but I think I'll try something else with sharp and changing the extensions inside the files, not the best practice I know, but I'll try so.