I have an Astro component at apps/website/src/components/hero.astro using a custom <Picture> wrapper:

<Picture
  src={heroImage}
  alt="CroCoder Hero Image"
  widths={[1196, 598, 553, 292]}
  loading="eager"
  fetchpriority="high"
/>

On mobile, Lighthouse warns:

“This image file is larger than it needs to be (1196×1333) for its displayed dimensions (249×278).”

What I need you to do:

1. Analyze why the image is being served at too-high a resolution on small viewports.

2. Update the <Picture> component (or surrounding layout) so that:

   • A correct sizes attribute is generated reflecting actual CSS widths at each breakpoint.
   • Appropriate srcset widths match those breakpoints.
   • The mobile-served file does not exceed approximately 249×278 px.

3. If necessary, adjust or regenerate optimized image variants (e.g., 320w, 480w, 800w).

4. Provide the updated Astro code snippet and explain how each change fixes the Lighthouse warning and improves performance.