Skip to main content

Images served with explicit width and height to prevent layout shift

ab-001029 · directory-listing-schema.image-handling.image-dimensions
Severity: mediumactive

Why it matters

Images without explicit width and height attributes cause Cumulative Layout Shift (CLS) — the browser reserves no space until the image loads, then reflows all surrounding content. Google's Core Web Vitals threshold for CLS is 0.1; a directory listing page with 8 unsized images can easily exceed 0.5, dropping the page into the 'Poor' range and triggering a search ranking penalty. iso-25010:2011 performance-efficiency classifies layout stability as a resource utilization quality attribute. Beyond SEO, layout shift causes users to misclick adjacent links, a user-experience failure that increases bounce rate on listing pages where conversion depends on clicking through to the business.

Severity rationale

Medium because CLS from missing dimensions measurably degrades Core Web Vitals scores and search ranking, but the failure does not expose data or create security risk.

Remediation

Add explicit width and height to every listing image, or enforce a consistent aspect ratio via CSS aspect-ratio. For Next.js projects, use the <Image> component which enforces dimensions and handles responsive sizing.

// Using Next.js Image for automatic CLS prevention
import Image from 'next/image';

<Image
  src={listing.imageUrl}
  alt={`${listing.name} storefront`}
  width={800}
  height={600}
  className="w-full h-auto"
/>

For plain <img> tags, at minimum add style={{ aspectRatio: '4/3' }} alongside width and height. Validate CLS improvement with Lighthouse or PageSpeed Insights after deploying the fix.

Detection

  • ID: directory-listing-schema.image-handling.image-dimensions

  • Severity: medium

  • What to look for: Count all listing images. For each, examine listing image elements. Check if <img> tags or Next.js <Image> components have width and height attributes or CSS aspect-ratio set.

  • Pass criteria: All listing images have explicit width and height attributes (or CSS aspect-ratio) to prevent Cumulative Layout Shift — at least 1 standard aspect ratio enforced (1:1, 4:3, or 16:9) for listing thumbnails. Report: "X images found, all Y have consistent dimensions."

  • Fail criteria: Images have no width/height attributes, causing layout to shift as images load.

  • Skip (N/A) when: Listings don't use images.

  • Detail on fail: Example: "<img> tags lack width and height attributes"

  • Remediation: Add explicit width and height or use aspect-ratio CSS:

    <img
  src={imageUrl}
  alt="listing image"
  width={800}
  height={600}
/>

External references

Taxons

performance

History