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.
❓ Frequently Asked Questions
Why is it important to include size attributes for images?
Including size attributes for images helps the browser reserve the correct space while rendering, preventing layout shifts and improving user experience.
How do missing size attributes affect SEO?
Missing size attributes can lead to poor page experience, negatively impact Core Web Vitals (especially CLS), cause rendering delays, and create accessibility issues, all of which can harm SEO rankings.
What are the best practices for adding size attributes to images?
Best practices include defining width and height for images in HTML or CSS, using responsive image techniques like srcset and sizes, and ensuring dimensions match the actual image to prevent distortion.
What are the benefits of fixing missing size attributes for images?
Fixing missing size attributes can improve CLS scores, enhance perceived load times, provide a more stable browsing experience, and ultimately lead to higher SEO rankings and user engagement.