I’ve recently published the module lazyimg
for that, with support for lazy-loading and responsive images (related post here).
From a shortcode, you can call it like:
{{< lazyimg img="images/alps.jpg" renderer="webp" >}}
<!-- More extensively, with support for a blur-up LQIP -->
{{< lazyimg img="images/alps.jpg" renderer="lqip-webp" resizer="responsive" maxSize="640x" alt="mountains" >}}
Due to its flexible architecture, you can independently exchange resizers and renderers.
README and example site give more insights on all available configuration options/defaults which can be easily overriden.
The module is currently being battle-tested in my theme, and I plan to release its first stable version, soon. Feedback appreciated!