Optimize for legibility as well as transfer size
Choose image dimensions and display rules that preserve readable evidence while controlling download size. An attractive crop can remove an audit heading, a report label or a table column the reader needs.
An image of a report is evidence only while its labels remain readable and its boundaries are visible. Cropping can conceal a date, source or limitation. Distortion can change the impression of the original interface. Choose the displayed task before deciding resolution and compression.
A worked example
A hypothetical audit cover is placed in a square card with cover-style cropping. The layout looks tidy, but the left edge and report title disappear. A contained image, suitable aspect ratio and link to a full-size view preserve the evidence without requiring the card to load an unnecessarily large original.
How to apply it
- Check intrinsic dimensions, display ratio and whether contain or crop behavior is intended.
- Create appropriately sized variants while preserving readable labels and the full relevant frame.
- Test the image at actual desktop and mobile sizes, including any enlargement link.
What the result can establish
Acceptance means a visitor can understand the evidence and access the complete relevant view. Use descriptive alternative text for the image’s purpose. Do not imply a screenshot is live client performance when it displays labeled synthetic demo data.
Reference: web.dev: optimizing LCP.
Supporting documentation
web.dev: optimizing LCPweb.dev: optimizing CLSGoogle: technical requirements