Add Dimensions to Images

What Is This Issue?

When images don't have explicit width and height attributes, browsers don't know how much space to reserve for them. As images load, they push other content around, causing layout shifts. This directly impacts Cumulative Layout Shift (CLS), one of Google's Core Web Vitals.

Why This Matters

Core Web Vitals

CLS measures visual stability. Google uses Core Web Vitals as ranking factors, so poor CLS scores can hurt your search visibility.

User Experience

Layout shifts are frustrating. Users might click the wrong thing when content suddenly moves, or lose their place while reading.

How to Fix This Issue

Modern CSS with aspect-ratio can help too:

img {
  width: 100%;
  height: auto;
  aspect-ratio: attr(width) / attr(height);
}

Best Practices

1. Always Include Dimensions: Add width and height to every img tag
2. Use Actual Dimensions: Match the image's intrinsic size
3. CSS Can Override: Responsive CSS can still resize images
4. Consider aspect-ratio: Modern CSS property helps maintain ratios