---
title: "Responsive image without sizes (perf/image-sizes)"
description: "Without sizes, a fill image's srcset assumes 100vw and a stretched fixed-width image only offers 1x/2x files: phones download desktop-sized images."
url: http://localhost:4173/rules/perf/image-sizes
updated: 2026-11-11
---

# Responsive image without sizes

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

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

## Why it matters

Without sizes, a fill image's srcset assumes 100vw and a stretched fixed-width image only offers 1x/2x files: phones download desktop-sized images.

## How to fix it

Add sizes describing the rendered width, e.g. sizes="(min-width: 768px) 50vw, 100vw".

## Credit

Based on work by:

- [Next.js team](https://nextjs.org): The sizes prop tells next/image which srcset width to pick; without it the browser assumes full-viewport width.
- [Google Chrome](https://developer.chrome.com/docs/lighthouse/overview): Lighthouse's properly-size-images audit flags images larger than they are displayed.

## References

- [Image Component](https://nextjs.org/docs/app/api-reference/components/image), Next.js
- [Properly size images](https://developer.chrome.com/docs/lighthouse/performance/uses-responsive-images), Chrome for Developers
- [Serve responsive images](https://web.dev/articles/serve-responsive-images), web.dev
- [Using responsive images in HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images), MDN Web Docs

## See it

Demos in the vetd Lab:

- [Image sizes and priority](http://localhost:4173/lab/nextjs/image-sizes-and-priority)
- [Image dimensions and sizes](http://localhost:4173/lab/web-perf/image-dimensions-and-sizes)

## Related rules

- [`perf/image-size`](http://localhost:4173/rules/perf/image-size.md)
- [`perf/image-priority`](http://localhost:4173/rules/perf/image-priority.md)

## Get this text from vetd

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

---

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