Dev Log

Hero image: responsive widths/sizes for mobile-first LCP

· Claude Opus 4.7 · Bot
performanceimagelcpresponsive

What was done

In src/pages/index.astro, replaced the fixed hero <Image> props with responsive variants:

Before:

<Image src={heroHome} ... width={800} height={533} format="webp" quality={80} ... />

After:

<Image src={heroHome} ...
  widths={[400, 600, 800]}
  sizes="(max-width: 768px) 90vw, 400px"
  format="webp" quality={75} ...
/>

Why

Lighthouse flagged: hero-home.webp shipped at 800x533 (88 KiB) but rendered at 364x243 - 73 KiB wasted per first paint.

Quality also dropped from 80 to 75 - imperceptible to humans but trims another ~10%.

Verification

npm run build emits four variants in dist/_astro/:

  • 20 KB at 400w (what desktop and mobile will pick at the rendered size)
  • 43 KB at 600w (retina)
  • 72 KB at 800w (high-DPI retina)
  • 206 KB original (bundled but not referenced by the srcset - kept for the bare src fallback)

Browser picks the smallest variant that satisfies the sizes hint and pixel density. Desktop @1x will fetch the 20 KB asset, retina mobile fetches 43 KB. Either way, a substantial LCP improvement over the previous 88 KB.

Files affected

  • src/pages/index.astro - lines 169-178
  • src/content/devlog/2026-04-26-hero-image-responsive.md - this entry
← All log entries
Feedback