perf(marketing): serve images at their display size

[t3dotgg]

The website used a full desktop screenshot even at the breakpoint where CSS hides it. Its 20-pixel footer icon came from a 1,024-pixel image.

The screenshot now has responsive sizes and an inline source at the hidden mobile breakpoint. The original full-size image is preserved. Astro generates 20-, 40-, and 60-pixel footer icons at build time. Layout and page JavaScript are unchanged.

The 1,180-pixel screenshot is 97,500 bytes versus the 268,254-byte original. Footer variants are 364 to 1,096 bytes versus 20,126 bytes. These are build-artifact sizes, not browser network measurements.

Verified with the production Astro build, Astro typecheck, emitted image dimensions, original-image byte equality, and independent source review. No browser or device use, as requested.

Part of the performance audit work, items P1 and P4.

Created with GPT-6 Astra (preview) in Codex.

---

Note

Low Risk
Marketing-site-only asset pipeline and markup changes; no auth, APIs, or shared app logic affected.

Overview
Adds sharp as a direct marketing dependency so Astro’s asset pipeline can resize images at build time.

Footer icon: static /icon.webp is replaced with astro:assets Image on ../assets/icon.webp, generating 20/40/60px WebP variants (densities 1–3) instead of shipping a large file for a 20px slot.

Hero screenshot: the full-width /app-desktop.webp <img> becomes a getImage-driven responsive setup with srcset/sizes at 864–2360px widths, plus a <picture> 1×1 GIF source for max-width: 820px so mobile layouts that hide the preview do not download the desktop asset. The original full-resolution asset remains in the srcset for large displays.

^{Reviewed by Cursor Bugbot for commit 3e75f3b. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Serve marketing images at display size with Astro Image pipeline

• Adds sharp@0.34.5 and replaces the footer's static public-path icon with Astro's Image component, outputting WebP at quality 90 with 1x/2x/3x densities and lazy loading.
• Replaces the homepage hero <img> with a <picture> element that serves generated WebP screenshot variants at widths 864, 1180, 1728, and 2360; viewports ≤820px receive a transparent 1×1 GIF instead of the desktop screenshot.
• Risk: viewports below 820px no longer see the hero screenshot at all, since the mobile source is a transparent 1×1 GIF.

^{Macroscope summarized 3e75f3b.}

[github-actions]

Thread transfer impact

✅ Thread transfer remains within every enforced ceiling.

Provider	Metric	Main baseline	This PR	Impact	PR ceiling
Codex	Total thread wire	13.5 KiB	13.6 KiB	+85 B (+0.6%)	15.1 KiB	✅
Codex	Thread snapshot wire	7.0 KiB	7.0 KiB	+2 B (+0.0%)	7.3 KiB	✅
Codex	Live turn WebSocket wire	6.5 KiB	6.6 KiB	+83 B (+1.2%)	7.8 KiB	✅
Codex	Live turn WebSocket decoded	57.0 KiB	57.1 KiB	+88 B (+0.2%)	66.4 KiB	✅
Codex	Live turn messages	8	10	+2 (+25.0%)	21	✅
Claude	Total thread wire	13.5 KiB	13.6 KiB	+74 B (+0.5%)	15.1 KiB	✅
Claude	Thread snapshot wire	7.0 KiB	7.0 KiB	−2 B (−0.0%)	7.3 KiB	✅
Claude	Live turn WebSocket wire	6.5 KiB	6.6 KiB	+76 B (+1.1%)	7.8 KiB	✅
Claude	Live turn WebSocket decoded	57.8 KiB	57.9 KiB	+88 B (+0.1%)	66.4 KiB	✅
Claude	Live turn messages	8	10	+2 (+25.0%)	21	✅

Baseline: 887ece3 · PR result: 3e75f3b · Source CI: success

Scenario and decoded snapshot size

10 historical turns, 5 command tools per turn, 878.9 KiB retained MCP result per historical turn, and a 1.05 MiB retained result in the measured turn.

• Codex decoded thread snapshot: 113.8 KiB
• Claude decoded thread snapshot: 114.5 KiB

Updated in place by a trusted workflow. PR artifacts are strictly validated and never executed.

[macroscopeapp]

Approvability

Verdict: Approved at 3e75f3b

Macroscope's review found this PR approvable — This is a small, isolated marketing performance change that serves existing images at responsive display sizes and avoids an unnecessary mobile request. It adds only build-time image processing and preserves the existing page content, layout, and static deployment model.

^{You can add or adjust custom eligibility rules. Learn more.}