Webp image strategy? please help

Hello everyone.
I have seen exchanges around on responsive strategy but it seems a little bit confusing, I mean like a discussion of specialists.
So I have several questions.
First point
Let’s say I have a structure like:

<figure>
<picture markdown="1">
<source srcset="/user/sites/docs/themes/mytheme/images/apollon_700x556.webp" type="image/webp">
![image-title](link) {.class}
</picture>
</figure>

to serve webp format when possible.
For clarity, I’d like to have my picture in the post folder.
how can I do to have my srcset pointing to the original folder and not the theme folder?
On the top of that I would like to have GRAV caching my webp file like it does for my jpg file.
I have looked at the docs and add a webp file format in my config folder, but from there I don’t know how to proceed.
how can I do to have that particular webp image is considered by the media method and put in cache like a jpg one?
note: I have made an request for enhancement in repo getgrav/grav for adding webp format.

Issue liked: https://github.com/getgrav/grav/issues/1168