Image Dimensions SEO Rule

Check that images have explicit width and height attributes to prevent Cumulative Layout Shift

What This Rule Checks

Fetches image details via HTTP HEAD requests. Reports image file sizes, checks for missing width/height attributes, warns about images over 1MB, and validates image URLs.

Why It Matters for SEO & GEO

Images without width and height attributes cause layout shifts as they load, hurting CLS scores. CLS is a Core Web Vital that directly affects Google rankings.

How to Fix

Add explicit width and height attributes to all images. Optimize images larger than 1MB. Use CSS aspect-ratio as an alternative to prevent layout shifts.

Examples

Bad

<img src="photo.jpg" alt="Photo">

Good

<img src="photo.jpg" alt="Photo" width="800" height="600">

How VibeLinter Checks Image Dimensions

VibeLinter’s images/size rule performs these checks on every image:

Dimension attributes — Warns when images are missing width and/or height HTML attributes
File size detection — Fetches image file sizes via HTTP HEAD requests and reports them (bytes, KB, or MB)
Large image warning — Warns when image files exceed 1MB, suggesting optimization
URL validation — Reports invalid image URLs that cannot be resolved
Image details report — Provides an info-level summary of each image including alt text, file size, HTML dimensions, and URL

Configuration

// vibelinter.config.cjs
module.exports = {
  rules: {
    'images/size': {
      enabled: true,
      severity: 'info'
    }
  }
}

SEO Impact

Explicit image dimensions affect:

CLS prevention — Width and height attributes reserve space, preventing layout shifts during image loading
Core Web Vitals — CLS is a ranking factor; missing dimensions directly impact scores
User experience — Layout shifts cause accidental clicks and frustrating visual jumps
GEO (Generative Engine Optimization) — Pages with good CLS scores rank higher in both traditional and AI-powered search results, as user experience signals are factored into content quality assessments