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 width and height attributes on <img> matching the image's intrinsic dimensions
• Pair with height: auto in 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-ratio from these attributes—do not set arbitrary placeholder values

Check

Scan all elements in the codebase. Identify any that are missing either the width or height attribute. Also check elements inside —dimensions should be on the fallback. Report each image missing dimensions with its file path and line number. Note: SVG icons under 32px, tiny decorative SVG ornaments with stable CSS sizing, and images loaded as CSS backgrounds are exempt.

Fix