Wagtail briefly mentions responsive images in their docs using the <picture> tag. This is the approach I am using:

{% image self.image width-900 format-webp-lossless as image_desktop %}
<picture>
<source media="(min-width:640px)"
            srcset="{{ image_desktop.url }}"
            width="{{ image_desktop.width }}"
            height="{{ image_desktop.height }}">
{% image self.image width-400 format-webp-lossless class="<your classes>" loading="lazy" %}
</picture>

Note that any CSS classes should be applied to the <img/> tag only.

The explicit width and height need to be set on the <source/> tag only because Wagtail sets them for us on the <img/> tag.