A sharp mobile image can still crop out the product handle, room entrance or subject that explains the project. Before commissioning responsive hero artwork, approve the meaningful region and separate mobile composition from simple file-size selection. A faster download is not proof the crop communicates the same thing.
Who should use this acceptance brief
Product brands and architectural portfolios. Use this as a scoped website handover task. Where real system evidence is required, teaching examples are not a substitute.
Source-bound platform fact
The picture element can choose different sources for art direction, while its img provides fallback content. Asset selection still needs visual verification at the intended breakpoint. MDN: picture · Checked 16 October 2026.
Filled teaching example
Synthetic example, not a client case. Finite inputs, expected decisions and counterexamples follow; no live integration is claimed.
On narrow screens, scroll to read the complete table.
| Input / case | Check basis | Expected decision |
|---|---|---|
| subject box x40–80,y20–70 | crop x20–90,y0–100 | contained |
| same subject | crop x0–60,y0–100 | clipped |
| missing subject approval | unknown region | review |
Run the acceptance exercise
- Mark the subject rectangle on the approved source asset, using a consistent coordinate system.
- List the planned crop for phone, tablet and desktop and compare the subject coverage.
- Inspect the actual current source and fallback in each viewport, including text over the image.
Interpret the result and retain evidence
The checker uses synthetic rectangles rather than rendering images. Full containment is this example’s design requirement, not a universal aesthetic rule. If intentional clipping is part of the art direction, record a new approved requirement instead of silently changing the subject box until a checker passes.
Limits before implementation
Excludes image licensing, focal-point detection, LCP measurements and alt-text quality. No existing site image or shared CSS is modified.
Replay the finite example
Save both files in one folder and run with Node22.13 or newer. The example sends no network requests and changes no account or site. Filled inputs and expected outputs · Inspectable functions
node decision-check.mjs mobile-hero-crop-proof.json