Bad value X for attribute “sizes” on element “img”: Bad media condition: only “0” can be a “unit”. You must put a unit after your numbe at Y.

A sizes attribute on an <img> element contains a media condition where a number is missing its CSS unit (like px, em, or rem).

The sizes attribute tells the browser how wide an image will be displayed at different viewport sizes, so it can pick the best source from a srcset. Each entry in sizes is a media condition paired with a length value. The media conditions follow standard CSS media query syntax, which means all non-zero numeric values must include a unit.

A common mistake is writing something like (max-width: 600) instead of (max-width: 600px). In CSS, bare numbers without units are invalid except for 0, which doesn't need a unit because zero pixels, zero ems, and zero rems are all the same thing.

Example with the error

<img
  src="photo.jpg"
  srcset="photo-480.jpg 480w, photo-800.jpg 800w"
  sizes="(max-width: 600) 480px, 800px"
  alt="A sunset over the ocean">

The media condition (max-width: 600) is missing a unit after 600.

Fixed example

<img
  src="photo.jpg"
  srcset="photo-480.jpg 480w, photo-800.jpg 800w"
  sizes="(max-width: 600px) 480px, 800px"
  alt="A sunset over the ocean">

Adding px (or whichever unit is appropriate) to the number in the media condition resolves the error. This applies to every numeric value in the media condition, not just the length that follows it. For example, (min-width: 40em) 50vw, 100vw is also valid.

Learn more:

MDN Reference

MDN: img element - sizes attribute

→

MDN Reference

MDN: Responsive images

→

WHATWG Spec

WHATWG: Embedded content

→