Wagtail responsive images the right way

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.