Intermediate LevelHTML & Semantic Web
How do explicit width and height attributes on images prevent Cumulative Layout Shift (CLS)?
❓ Interview Prompt: Explain Core Web Vital Cumulative Layout Shift (CLS), aspect-ratio calculation, and specifying width/height on <img> tags.
When browsers fetch an image without explicit dimensions, they render a 0-height placeholder until the image downloads, causing surrounding page content to jump abruptly (Cumulative Layout Shift - CLS).
The Fix:
Specify explicit 'width' and 'height' attributes on '<img>' tags. Modern browsers calculate the image's aspect ratio before downloading, reserving the exact layout space on the page and completely eliminating layout shifts!
Code Implementation Example
html
<!-- Explicit dimensions allow browser to calculate aspect ratio and reserve layout space -->
<img src="hero.jpg" alt="Hero Banner" width="1200" height="630" style="width: 100%; height: auto;">💡Preventing Cumulative Layout Shift (CLS) by setting explicit image width and height attributes.
🎯 Interview Key Takeaway
Specify explicit width and height attributes on images so browsers reserve layout space and eliminate Cumulative Layout Shift (CLS).
#CLS#Core Web Vitals#width height#Performance#Intermediate
Back to all HTML & Semantic Web Questions→