Home page image aspect ratio

[kentcdodds]

Adds an explicit aspect ratio to the home page hero image to prevent layout shift during initial page load.

Test Plan

Manually reload the home page (http://localhost:3000) and observe that the hero image reserves the correct space immediately, without layout shifts.

Checklist

• Tests updated
• Docs updated

Screenshots

Hero image reserves 3:2 space on load.

Hero section with updated image ratio.

---

 

---

Note

Low Risk
Small, presentation-only change to a single static image; minimal risk beyond potential unintended visual sizing differences.

Overview
Adds explicit width and height attributes to the marketing home page hero <img> (app/routes/_app+/_marketing+/index.tsx) so the browser can reserve space up front and avoid layout shift during initial render.

^{Written by Cursor Bugbot for commit 3dab2e2. This will update automatically on new commits. Configure here.}

[cursor]

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is ON. A Cloud Agent has been kicked off to fix the reported issue.}

[cursor]

Image aspect ratio attributes conflict with CSS class

Medium Severity

The added width={2560} and height={1707} attributes represent a 3:2 aspect ratio, but the CSS class includes aspect-square which enforces a 1:1 ratio. The CSS aspect-ratio property takes precedence over intrinsic dimensions, so these attributes won't achieve the stated goal of reserving 3:2 space during page load. The width/height values need to match the actual displayed ratio (1:1) for the layout shift prevention to work correctly.

 

[cursor]

Bugbot Autofix resolved the bug found in the latest run.

• ✅ Fixed: Image aspect ratio attributes conflict with CSS class
  • Updated the image class to use the 3:2 aspect ratio so layout reservation matches the width/height attributes.