Set explicit width and height on images
Images without explicit dimensions are the most common cause of Cumulative Layout Shift (CLS), a Core Web Vitals metric. When images load and cause layout jumps, users accidentally click the wrong element—a frustrating experience that Google penalises in search rankings. A CLS score above 0.1 is considered 'needs improvement'; above 0.25 is 'poor'.
Quick Reference
- Reserve findings for meaningful content images; decorative micro-SVGs or ornament-only assets are low-priority exceptions when CSS already reserves stable space
- Example low-risk exception:
<img src="/divider.svg" alt="" aria-hidden="true">should not be flagged on its own without evidence of visible layout shift - Always set
widthandheightattributes on<img>matching the image's intrinsic dimensions - Pair with
height: autoin CSS to keep the image fluid while preserving the aspect ratio - Missing dimensions are the leading cause of Cumulative Layout Shift (CLS) from images
- Browsers derive
aspect-ratiofrom these attributes—do not set arbitrary placeholder values
Check
Scan all <img> elements in the codebase. Identify any that are missing either the…
