Tool to auto-insert in html WebP version of an image?

Question

css

Do you know a tool to automatically insert webp to html?
For example, a package for Galpa or a postHTML plugin.
Let's say we have this HTML input:

<picture>
   <source media="(min-width: 768px)" srcset="img-1--tablet.jpg 1x, [email protected] 2x">
   <img src="img-1--mobile.jpg" srcset="[email protected] 2x">
</picture>

As a result, the following should be added to the code:

<source type="image/webp" media="(min-width: 768px)" srcset="img-1--tablet.webp 1x, [email protected] 2x">
   <source type="image/webp" srcset="img-1--mobile.webp 1x, [email protected] 2x">

Provided that in the folder with images there are files of the same name with the .webp extension.
Do not know if there is something similar or design a bicycle?

Answer 1

Try:
https://www.npmjs.com/package/gulp-webp-html