The picture element is for art direction, not resolution

srcset and picture look like two ways to do the same job. They are not: srcset lets the browser choose a size of the same image, picture lets you choose a different image.

<!-- same photo, browser picks the size -->
<img srcset="hero-800.jpg 800w, hero-1600.jpg 1600w" sizes="100vw" src="hero-800.jpg" alt="">

<!-- different crop below 700px — a decision, not an optimisation -->
<picture>
  <source media="(max-width: 700px)" srcset="hero-square.jpg">
  <img src="hero-wide.jpg" alt="">
</picture>

The rule of thumb: if a designer would call it the same image, use srcset and let the browser decide — it knows the viewport, the pixel ratio and the connection, and you do not. Reach for picture when the subject needs a different crop on a narrow screen, or to offer a format the browser may not support with a fallback below it.