PreRender Add <picture> with webp for .png images

Hey, I’m building out my site by basing it off of GitHub - ionic-team/capacitor-site: Capacitor website which uses Stencil. It is a fantastic framework / theme but it’s missing a few micro-optimization features like automatic webp <picture> sets which I was hoping to have automatically swapped in any time an <img is used. Is there any way to handle this in a way that’s compatible with Stencil’s DOM ids? I thought I could use RegEx but I don’t think that will be compatible with Stencil’s DOM manager.

I also wouldn’t mind a feature that just automatically updated each <img tag to reference the .webp version of the image if the browser supports webp but I’m unsure how to do this – is there a hook that runs everytime an <img src changes?