# No Image-caused CLS

**MUST** · **ID:** `performance-no-image-cls` · **Category:** performance
**Source:** [Vercel](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/performance-no-image-cls

> MUST: Prevent CLS from images (explicit dimensions or reserved space)

Set explicit image dimensions and reserve space

Images without dimensions cause layout shift when they load. Always set width and height attributes (or use aspect-ratio in CSS) so the browser can reserve the correct space before the image downloads.

## Bad — do not do this

`performance-no-image-cls-bad`

```tsx
export function NoImageCLSBad() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <h3 className="text-lg font-semibold mb-2">Product Card</h3>
        <img
          src="https://images.pexels.com/photos/1279330/pexels-photo-1279330.jpeg?auto=compress&cs=tinysrgb&w=400"
          alt="Black premium wireless headphones with cushioned ear cups"
          className="w-full rounded mb-2"
        />
        <p className="text-sm text-muted-foreground">
          Product description appears after the image loads, causing content to shift down.
        </p>
      </div>
      <p className="text-xs text-error mt-4">
        No reserved space causes layout shift when image loads
      </p>
    </div>
  );
}
```

## Good — do this

`performance-no-image-cls-good`

```tsx
export function NoImageCLSGood() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <h3 className="text-lg font-semibold mb-2">Product Card</h3>
        <div className="relative w-full mb-2" style={{ aspectRatio: '4/3' }}>
          <img
            src="https://images.pexels.com/photos/1279330/pexels-photo-1279330.jpeg?auto=compress&cs=tinysrgb&w=400"
            alt="Black premium wireless headphones with cushioned ear cups"
            className="absolute inset-0 w-full h-full object-cover rounded"
            width={400}
            height={300}
          />
        </div>
        <p className="text-sm text-muted-foreground">
          Reserved aspect ratio prevents layout shift when image loads.
        </p>
      </div>
      <p className="text-xs text-success mt-4">
        aspect-ratio reserves space, preventing layout shift
      </p>
    </div>
  );
}
```

## References

- [Image Aspect Ratio](https://web.dev/articles/optimize-cls)
- [Cumulative Layout Shift](https://web.dev/articles/cls)