Skip to content

Image Dimensions (CLS Prevention)

Add missing width and height attributes to images in post content to prevent Cumulative Layout Shift.

The Problem

Images without explicit dimensions cause layout shift as they load. The browser doesn't know how much space to reserve, so content jumps around when the image appears. This hurts the Cumulative Layout Shift (CLS) Core Web Vital metric.

How It Works

Cacheability Pro processes post content and widget text, finding <img> tags that are missing width or height attributes. For local images, it reads the actual dimensions and adds them to the tag.

<!-- Before: no dimensions, causes layout shift -->
<img src="/uploads/photo.jpg" alt="Photo">

<!-- After: dimensions added, no layout shift -->
<img src="/uploads/photo.jpg" alt="Photo" width="640" height="480" style="aspect-ratio: 640 / 480;" />

Dimension Sources

  1. WordPress attachment metadata - checked first for uploaded images
  2. getimagesize() - fallback for images on the local filesystem

Aspect Ratio

In addition to width and height attributes, an aspect-ratio CSS property is added inline. This ensures the image scales responsively while maintaining its proportions:

aspect-ratio: 640 / 480;

What Gets Processed

  • Images in post content (the_content filter)
  • Images in text widgets (widget_text_content filter)

What Gets Skipped

  • Images with existing dimensions - existing width and height are never modified
  • External images - images hosted on other domains are skipped to avoid slow remote lookups
  • Admin pages - processing only runs on frontend

Zero Configuration

Image dimensions are detected and added automatically. No settings needed.