The ticket says: "Hero image is too small. Please send a bigger version." Priya, the designer, sends the original at 3840 × 2160, four times the pixels of the 1920 × 1080 file the developer had. The ticket comes back an hour later: "Still doesn't fit."
They are both right, and they are talking about different things.
"Too small" meant "wrong shape"
Priya asks for a screenshot. The hero slot on the new page is wide and short: 1440 px wide and 600 px tall on desktop. That is a ratio of 2.4:1. The image is 16:9, or 1.78:1.
When the developer set the image to cover the slot, the browser scaled it to the slot's width and cropped the top and bottom. The cropped area included the headline the marketing team had placed in the image. To the developer, the image looked "too small" because the important part was missing. A 4K version had the same 16:9 shape, so it was cropped exactly the same way.
Separating the two questions
Priya writes them down so the team can answer them one at a time:
- What shape does the slot need? That's the aspect ratio: 2.4:1 on desktop. On mobile the slot is 375 × 420, a portrait 0.89:1.
- How many pixels does it need? That's the resolution: 1440 × 600 at 1×, and 2880 × 1200 for high-density screens.
A bigger file answers the second question. Only a new crop answers the first.
What they shipped
- A 2.4:1 desktop crop at 2880 × 1200, with the subject placed so nothing important sits in the outer edges.
- A separate portrait mobile crop at 750 × 840, swapped in with a
<picture>element. - The headline taken out of the image and set as real HTML text, so it no longer depends on any crop.
The CSS got aspect-ratio: 12 / 5 on desktop, so the layout reserves the right space before the image loads and the page doesn't jump.
The handoff checklist that came out of it
- State every size as width × height, never just "bigger" or "HD".
- Include the ratio of the slot, not just the ratio of the file.
- Note the safe area, the part that must survive every crop.
- Keep text that has to be read in HTML, not in the image.
Resolution is how much detail an image has. Aspect ratio is its shape. When something "doesn't fit", check the shape first.
For more detail, read Resolution vs. Aspect Ratio, or work out a slot's ratio in the calculator. Turn off Lock Ratio and type the slot's width and height.