P2Issue #59
Image : Missing size attribute
❓ What does it mean?
❓ What does it mean?
When images on a webpage do not have explicit width and height attributes (or equivalent CSS properties), the browser cannot reserve the correct space while rendering.
This causes layout shifts (content jumping as images load), which negatively impacts Core Web Vitals—especially CLS (Cumulative Layout Shift).
🚨 Why is it important for SEO?
🚨 Why is this a problem for SEO?
Poor Page Experience – Layout shifts frustrate users, especially on mobile.
Core Web Vitals Impact – Google considers CLS a ranking factor.
Rendering Delays – The browser spends extra time recalculating layout after images load.
Accessibility Issues – Missing attributes reduce predictability of how content is displayed.
✅ How to Fix It
✅ Best Practices to Fix
Always define width and height for images (either in HTML attributes or CSS).
Use responsive image techniques (srcset, sizes, CSS max-width: 100%).
For modern sites, use aspect-ratio CSS property as a fallback.
Ensure dimensions match the actual image to prevent distortion.
❌ Bad Example
📌 Example
❌ Bad (Missing Size Attributes):
<img src="/images/product-shoe.jpg" alt="Running Shoes">
👉 No width and height → causes layout shift when the image loads.
✅ Good Example
✅ Good (With Size Attributes):
<img src="/images/product-shoe.jpg"
alt="Running Shoes"
width="600"
height="400">
👉 Browser knows image space before loading → no layout shift.✅ Responsive Example (Best Practice):
<img src="/images/product-shoe.jpg"
alt="Running Shoes"
width="600"
height="400"
style="max-width:100%; height:auto;">
👉 Works well on both desktop and mobile while reserving layout space.
⚡ Result
⚡ SEO & UX Impact of Fixing
Improved CLS score → Better Core Web Vitals → SEO boost.
Faster perceived load time → Happier users.
More stable browsing experience → Higher conversions & engagement.