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.

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

<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

<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.

Learn more:

MDN Reference

HTML img element - sizes attribute

→

MDN Reference

Responsive images

→

WHATWG Spec

Images in HTML specification

→