Explain a responsive image srcset strategy for a design handoff

We're handing off a magazine-style article page to a developer. The hero image
needs to look right at five breakpoints: 390px (mobile), 768px (tablet), 1024px,
1440px, and 1920px (large desktop).

[replace with your own breakpoints and hero image dimensions]

The design has a wrinkle: at mobile width, the hero is cropped to a tighter
portrait aspect ratio focused on the subject's face, while at tablet width and up
it's a wide landscape crop showing the full scene. This isn't just "the same image
scaled down," it's a genuinely different crop.

Write a short handoff note explaining:
1. Which breakpoints can share one srcset/sizes setup because they're just
   different resolutions of the same crop, and give the actual width descriptors
   to generate.
2. Why the mobile breakpoint can't be handled with srcset alone, since srcset only
   swaps resolution, not crop, and needs a <picture> element with a separate
   source image instead, art-directed for the tighter portrait framing.
3. A plain-language note for the developer on which file goes with which media
   query, so this doesn't get implemented as one image awkwardly stretched into
   both aspect ratios.