How do you serve responsive images with srcset, sizes and <picture>?

<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="A desk"
  width="800" height="450" loading="lazy" />

<picture>
  <source type="image/avif" srcset="hero.avif" />
  <source media="(max-width: 600px)" srcset="hero-square.jpg" />
  <img src="hero.jpg" alt="A desk" />
</picture>