# Bad value X for attribute “sizes” on element “source”: Expected units (one of “em”, “ex”, “ch”, “rem”, “vw”, “vh”, “vmin”, “vmax”, “cm”, “mm”, “q”, “in”, “pc”, “pt”, “px”) but found Y at Z

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-x-for-attribute-sizes-on-element-source-expected-units-one-of-em-ex-ch-rem-vw-vh-vmin-vmax-cm-mm-q-in-pc-pt-px-but-found-y-at-z
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

A `sizes` attribute on a `<source>` element contains a length value that is missing valid CSS units or uses an unrecognized unit.

The `sizes` attribute tells the browser how wide an image will be displayed at a given viewport condition. Each entry in the `sizes` list is either a media condition paired with a source size value, or a default source size value. The source size value must be a valid CSS length, which means it requires a recognized unit such as `px`, `vw`, `em`, or `rem`. Bare numbers without units, percentage values (`%`), or made-up units are not allowed.

A common mistake is writing a bare number like `300` instead of `300px`, or using `%` instead of `vw`. The `%` unit is explicitly disallowed in `sizes` because the browser needs to resolve image widths before layout is complete, and percentage lengths depend on a containing block that may not be known yet. Use `vw` (viewport width) when you want a percentage-like relative size.

The `sizes` attribute applies to `<source>` elements inside a `<picture>`, and also to `<img>` elements directly.

## Invalid example

```html
<picture>
  <source
    srcset="image-480.jpg 480w, image-800.jpg 800w"
    sizes="(max-width: 600px) 100%, 50%"
    type="image/jpeg">
  <img src="image-800.jpg" alt="A sample photo">
</picture>
```

The validator rejects `100%` and `50%` because `%` is not a permitted unit in `sizes`.

## Fixed example

```html
<picture>
  <source
    srcset="image-480.jpg 480w, image-800.jpg 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
    type="image/jpeg">
  <img src="image-800.jpg" alt="A sample photo">
</picture>
```

Replace `%` with `vw`, or use any other valid CSS absolute or relative length unit (`px`, `em`, `rem`, etc.). A `calc()` expression with valid units also works, for example `calc(100vw - 2rem)`.