# Bad value X for attribute “sizes” on element “img”: Expected units (one of “em”, “ex”, “ch”, “rem”, “cap”, “ic”, “vw”, “svw”, “lvw”, “dvw”, “vh”, “svh”, “lvh”, “dvh”, “vi”, “svi”, “lvi”, “dvi”, “vb”, “svb”, “lvb”, “dvb”, “vmin”, “svmin”, “lvmin”, “dvmin”, “vmax”, “svmax”, “lvmax”, “dvmax”, “cm”, “mm”, “q”, “in”, “pc”, “pt”, “px”) but found “w” at Y
> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-x-for-attribute-sizes-on-element-img-expected-units-one-of-em-ex-ch-rem-cap-ic-vw-svw-lvw-dvw-vh-svh-lvh-dvh-vi-svi-lvi-dvi-vb-svb-lvb-dvb-vmin-svmin-lvmin-dvmin-vmax-svmax-lvmax-dvmax-cm-mm-q-in-pc-pt-px-but-found-w-at-y
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
The `sizes` and `srcset` attributes work together to enable responsive images, but they serve distinct roles and use different syntax. The `srcset` attribute lists available image files along with their intrinsic widths using the `w` descriptor (e.g., `800w` means the image file is 800 pixels wide). The `sizes` attribute, on the other hand, tells the browser how wide the image will actually be rendered in the layout, using standard CSS length units. The browser combines this information — knowing which files are available and how large the image will appear — to choose the most efficient file to download.
A common mistake is mixing up these two syntaxes, typically by copying a width descriptor like `860w` from `srcset` and placing it into `sizes`. Since `w` is not a CSS unit, the validator rejects it. This matters because an invalid `sizes` value prevents the browser from correctly calculating which image source to use, potentially causing it to download an unnecessarily large image (wasting bandwidth) or a too-small image (resulting in poor quality).
## How the `sizes` attribute works
The `sizes` attribute accepts a comma-separated list of **media conditions** paired with **CSS lengths**, plus an optional default length at the end. Each entry follows the pattern `(media-condition) length`. The browser evaluates the conditions in order and uses the length from the first matching condition. If none match, it uses the final default value.
Valid CSS length units include `px`, `em`, `rem`, `vw`, `vh`, `ch`, `cm`, `mm`, `in`, `pt`, `pc`, and CSS `calc()` expressions. You can combine units with `calc()` for more precise sizing — for example, `calc(100vw - 2rem)`.
## Examples
### ❌ Incorrect: using `w` in `sizes`
This triggers the validation error because `860w` is a `srcset` width descriptor, not a CSS length:
```html
```
### ✅ Correct: using `px` in `sizes`
Replace the `w` value with a CSS length that reflects the image's actual display size:
```html
```
### ✅ Correct: responsive `sizes` with media conditions
Use media conditions to specify different display sizes at different viewport widths:
```html
```
This tells the browser:
- On viewports 1024px and wider, the image displays at 860px wide.
- On viewports 568px and wider, the image displays at 430px wide.
- On smaller viewports, the image fills the full viewport width (`100vw`).
### ✅ Correct: using `calc()` in `sizes`
When the image width depends on padding or margins, `calc()` provides precise sizing:
```html
```
## Key takeaways
- The `w` descriptor belongs **only** in `srcset`, where it describes the intrinsic width of each image file.
- The `sizes` attribute uses **CSS length units** (`px`, `vw`, `em`, `calc()`, etc.) to describe how wide the image will appear on screen.
- If your image always displays at a fixed width, a simple value like `sizes="300px"` is sufficient.
- If your image width varies by viewport, use media conditions with appropriate CSS lengths to give the browser the information it needs to select the best source.