---
title: "Image without dimensions (perf/image-size)"
description: "next/image throws at runtime without width and height (unless fill or a static import); a raw <img> without them shifts the layout when it loads (CLS)."
url: http://localhost:4173/rules/perf/image-size
updated: 2026-11-11
---

# Image without dimensions

> `perf/image-size` is a vetd rule. It flags: Image without dimensions. It runs on every `check`, together with the TypeScript check.

| Fact | Value |
| --- | --- |
| Rule id | `perf/image-size` |
| Severity | error or warning |
| Group | Performance: fonts, images, scripts and bundle |
| Tags | performance, correctness, lighthouse |

## Why it matters

next/image throws at runtime without width and height (unless fill or a static import); a raw <img> without them shifts the layout when it loads (CLS).

## How to fix it

Set width and height (the intrinsic size), use fill inside a sized container, or import the image statically.

## Credit

Based on work by:

- [Next.js team](https://nextjs.org): next/image requires width and height (or fill) so the browser can reserve space.
- [Google Chrome](https://developer.chrome.com/docs/lighthouse/overview): web.dev documents that images without dimensions cause layout shift.

## References

- [Image Component](https://nextjs.org/docs/app/api-reference/components/image), Next.js
- [Optimize Cumulative Layout Shift](https://web.dev/articles/optimize-cls), web.dev
- [Image Optimization](https://nextjs.org/docs/app/getting-started/images), Next.js

## See it

Demos in the vetd Lab:

- [Reserve image space](http://localhost:4173/lab/nextjs/image-dimensions-and-placeholders)
- [Size and prioritize images](http://localhost:4173/lab/web-guidelines/image-loading-and-cls)
- [Image dimensions and sizes](http://localhost:4173/lab/web-perf/image-dimensions-and-sizes)

## Related rules

- [`perf/image-sizes`](http://localhost:4173/rules/perf/image-sizes.md)
- [`perf/img-element`](http://localhost:4173/rules/perf/img-element.md)

## Get this text from vetd

MCP: call `explain` with `{ "diagnosticId": "perf/image-size" }`. CLI: `npx vetd explain perf/image-size`.

---

[All 92 rules](http://localhost:4173/rules.md) · Previous: [`perf/img-element`](http://localhost:4173/rules/perf/img-element.md) · Next: [`perf/image-sizes`](http://localhost:4173/rules/perf/image-sizes.md)