P2Issue #38
Image elements do not have explicit width and height
❓ What does it mean?
❓ What does it mean?
This issue appears when images on a webpage don’t include defined width and height attributes in their HTML or CSS.
Without fixed dimensions:
The browser doesn’t know how much space to allocate.
This causes layout shifts when the image loads.
🚨 Why is it important for SEO?
🚨 Why is it bad for SEO?
Cumulative Layout Shift (CLS) ⚠️
CLS is one of Google’s Core Web Vitals.
Missing width/height = page elements move around = poor CLS score.
Poor User Experience 😣
Users may accidentally click wrong links if elements shift.
Negative Impact on Rankings 📉
Since CLS is part of Core Web Vitals, bad scores can hurt SEO rankings.
✅ How to Fix It
✅ Best Practices
Always define width and height in the <img> tag.
If using responsive design, use width and height plus CSS rules like max-width: 100%.
Use modern HTML attributes like loading="lazy" and decoding="async" with proper dimensions.
❌ Bad Example
📌 Example
❌ Bad (No Dimensions):
<img src="product.jpg" alt="Red Shoes">
No width or height.
Causes layout shift when the image loads.
✅ Good Example
✅ Good (With Explicit Dimensions):
<img
src="product.jpg"
alt="Red Shoes"
width="600"
height="400"
loading="lazy"
decoding="async">
Browser reserves 600x400 space before loading.
Prevents layout shift, improves CLS and SEO.
✅ Even Better (Responsive with CSS):
<style>
.responsive-img {
max-width: 100%;
height: auto;
}
</style>
<img
src="product.jpg"
alt="Red Shoes"
width="600"
height="400"
class="responsive-img">
Explicit width/height + CSS for responsiveness.
⚡ Result
⚡ Result of Fixing
CLS improves → Better Core Web Vitals.
Smoother user experience → No jumping content.
SEO boost → Google rewards stable, fast-loading pages.
Improved engagement → Users stay longer and interact more.