Images served with explicit width and height to prevent layout shift

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.

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.