# Bad value for attribute “sizes” on element “img”: Bad CSS number token: Expected a minus sign or a digit but saw X instead at Y.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-for-attribute-sizes-on-element-img-bad-css-number-token-expected-a-minus-sign-or-a-digit-but-saw-x-instead-at-y
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `sizes` attribute on an `img` element contains a malformed CSS length value, such as a missing digit, an invalid unit, or a typo in a media condition.

The `sizes` attribute tells the browser how wide an image will be displayed at different viewport sizes, so it can pick the best candidate from the `srcset` list before the page layout is calculated. Each entry in `sizes` is either a media condition paired with a CSS length, or a bare default length. The values must be valid CSS lengths like `100vw`, `50vw`, `(max-width: 600px) 100vw`, or use `calc()` expressions.

Common causes of this error:

- Writing `x` descriptors (like `1x`, `2x`) inside `sizes` instead of inside `srcset`.
- Using pixel density values such as `100w` as a display size (that is a `srcset` width descriptor, not a CSS length).
- Omitting a space between the media condition and the length value.
- Using invalid CSS units or misspelling a unit (e.g., `100 vw` with a space, or `px100` with the unit before the number).

The `sizes` attribute only accepts valid CSS `<length>` values such as `px`, `em`, `rem`, `vw`, `vh`, and `calc()` expressions. Width descriptors (`w`) and pixel density descriptors (`x`) belong exclusively in `srcset`.

## Incorrect example

```html
<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w"
  sizes="(max-width: 600px) 100w, 50vw"
  alt="A mountain lake">
```

Here `100w` is not a valid CSS length. The browser expects something like `100vw` or `600px`.

## Fixed example

```html
<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="A mountain lake">
```

Each value in `sizes` is now a valid CSS length: `100vw` means the image will span the full viewport width on small screens, and `50vw` is the default for larger viewports.
