How much should I expect vite-imagetools to do?

[rchrdnsh]

Hi Jonas :-)

Still very new to your plugin, and I'm trying to understand it better...I am trying to use it in a Svelte-Kit app and I was assuming that it would change the html a little bit for me. But I think this assumption is incorrect?

For example, if I have an image tag:

<img src={image} alt='cool pic of fun stuff.'/>

...and I import an image and transform it using imagetools:

import image from 'cool-pic.jpg?width=480;960;1920;3840'

...I thought the html would change to something like this(pseudo code), adding in the srcset attribute for me:

<img src={image} srcset={...the images that imagetools creates...} alt='cool pic of fun stuff.'/>

...or something like that...this does not seem to be the case, though?

Should I be handling adding the srcset myself?
Where does vite-imagetools end and my code begin?
No LQIP functionality at the moment? (Low Quality Image Placeholder)

Just trying to understand things better :-)

[JonasKruckenberg]

A very good question and I must admit not very well explained in the docs. So imagetools "ends" with the import statement.
So imagetools can manipulate the data that gets stored in the imported variable.

// given code like this
<img src="path/to/image.jpg?w=480"/>

// which is really only sugar for this

import imageUrl from "path/to/image.jpg?w=480"
h('img', { src: imageUrl })

// image tools can manipulate freely what data gets stored in the `imageUrl` variable
// i.e.
<img src="... everything inside these to quotes can be handled by imagtools ..."/>

For generating srcsets I've added the srcset directive which will turn an import like this

<img srcset="cool-pic.jpg?width=480;960;1920;3840&srcset" />

// into this
<img srcset="cool-pic.jpg 480w, cool-pic.jpg 960w, cool-pic.jpg 1920w, cool-pic.jpg 3840w" />

This directive only works with the width attribute for now though

[folknor]

Yes this information was essentially impossible to find in the docs. I still haven't found it, and I've read all the directives.md.

I read the docs first, thinking I would find the answer to the README.md's claim of Easy Srcset generation, but after reading the docs I started reading the "discussions" (whatever the fuck github means by that, it's essentially "issues-but-our-devs-and-designers-need-work-to-do", mozilla and other projects have happily used the bug tracker for all this stuff for literally decades) and issues.

I found it now, literally at the bottom of https://github.com/JonasKruckenberg/imagetools/blob/main/docs/spec.md, with no explanation.

Anyway the reason I'm replying here is I started reading the docs expecting this project to fill out picture elements with the generated alternative formats.

And this questions asks "How much should I expect?"

I realise my expectation is not spelled out anywhere in the readme/docs, so I might be a fool for expecting it - I think the lines Output modern formats from the readme plus <url>?width=300;500;700&format=webp;avif;jpg from https://github.com/JonasKruckenberg/imagetools/blob/main/docs/guide/getting-started.md prompted me to believe that imagetools would automagically generate picture elements with avif and webp from jpg and png, and so forth.

I'm not disappointed to find out otherwise. I'm not angry to find out otherwise. I'm not trying to attack or offend anyone.

I'm just telling you what I thought imagetools might do based on an optimistic outset, hope, and reading the docs. I was wrong.

[JonasKruckenberg]

Thanks for the honest feedback!
I agree that the docs are not perfect and I struggled quite a bit writing them. I find writing docs to be the most difficult part of open-source for various reasons and one difficulty is definitely managing expectations and it's good to get feedback on that.
As someone who has been working on rollup plugins for months now, I didn't even cross my mind that this would be a point of miscommunication but I'll try to address this for future users in an upcoming revision of the docs!