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.
❓ Frequently Asked Questions
What does it mean when image elements do not have explicit width and height?
It means that images on a webpage do not include defined width and height attributes in their HTML or CSS, causing layout shifts when the image loads.
Why is missing width and height for images bad for SEO?
It can lead to poor Cumulative Layout Shift (CLS) scores, negative user experiences, and potential negative impacts on SEO rankings.
How can I fix issues caused by missing width and height for images?
You can fix it by always defining width and height in the <img> tag, using responsive design techniques, and utilizing modern HTML attributes like loading="lazy" and decoding="async".
What are the benefits of adding explicit width and height to image elements?
Benefits include improved CLS scores, smoother user experiences, SEO boosts, and increased user engagement.