How to use the imagetools plugin with vite-rails ?

[adipasquale]

hi ! Thank you for vite-ruby and vite-rails I am loving this modern frontend experience with Rails :)

I'd like to autocompile my images to a modern format like WebP or AVIF. The vite-imagetools plugin seems to do just that.

However I'm having a hard time using it with vite-rails. I've tried a naive:

vite_image_tag("images/some-image.png?webp&w=50")

in my template but it's not doing the trick.

the vite plugin suggests to import files with these query parameters, but that's only valid for files used from within JS/TS code it seems.

[ElMassimo]

the vite plugin suggests to import files with these query parameters, but that's only valid for files used from within JS/TS code it seems

That's correct, it inspects JS code to detect the transforms and generate the corresponding images for them.

That plugin does not currently solve the use case you have in mind.

[adipasquale]

thanks @ElMassimo ! do you have a suggestion on how to do something similar? Otherwise I'll keep digging how to adapt this imagetools plugin

[ElMassimo]

Can you describe your use case? Where are you rendering these image tags?

[adipasquale]

my usecase is :

• I have non-optimized png and jpg images in app/frontend/images
• I'd like vite to process them during the compile phase, and output WebP or AVIF files (+ optionnally png files for fallback)
• I'd like to be able to use the processed WebP images in my ERB templates, using the vite_image_tag helper or another

[ElMassimo]

embedding images in ERB templates

Gotcha, using a Vite plugin to optimize images that will be used in server-rendered templates is a bit of a stretch 😅

Feel free to share any findings in this discussion, it's always helpful if someone runs into the same situation later on 😃

[adipasquale]

thanks! I'll let you know if I find a way to do it.

Is it such a stretch though? Vite would be useful for that usecase for Node SSR sites such as Next, no? The main difference is that we're using ruby instead of JS here in my (limited) understanding