# Bad value X for attribute “sizes” on element “source”: Bad media condition: Parse Error at Y
> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-x-for-attribute-sizes-on-element-source-bad-media-condition-parse-error-at-y
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
The `sizes` attribute tells the browser how wide an image will be displayed at different viewport sizes, so it can choose the best candidate from `srcset`. It only applies when `srcset` uses **width descriptors** (e.g., `480w`, `800w`). The value is a comma-separated list where:
1. Each entry (except the last) is a **media condition** in parentheses followed by a **CSS length** — for example, `(min-width: 800px) 50vw`.
2. The **final entry** is a fallback length with no media condition — for example, `100vw`.
The browser evaluates the media conditions from left to right and uses the length from the first one that matches. If none match, it uses the fallback.
The media condition syntax mirrors CSS media queries but **without** the `@media` keyword. You can use logical operators like `and`, `or`, and `not`, and features like `min-width`, `max-width`, `orientation`, etc.
## Why This Error Occurs
The validator parses the `sizes` value according to the [HTML living standard](https://html.spec.whatwg.org/multipage/images.html#sizes-attributes) and CSS Media Queries specification. A parse error is triggered when the value doesn't conform to the expected grammar. Common causes include:
- **Missing parentheses** around the media condition: `min-width: 600px 50vw` instead of `(min-width: 600px) 50vw`.
- **Missing length** after a media condition: `(min-width: 800px)` with no length following it.
- **Invalid or missing units** on the length: `50` instead of `50vw`, `50px`, or `50rem`.
- **Trailing commas** or extra separators: `(min-width: 600px) 50vw, , 100vw`.
- **Invalid media feature syntax**: typos like `(minwidth: 600px)` or using unsupported tokens.
- **Using `sizes` with pixel-density descriptors**: when `srcset` uses `1x`, `2x` instead of width descriptors, the `sizes` attribute is meaningless and can confuse validators.
## Why It Matters
- **Browser image selection**: Browsers rely on a correctly parsed `sizes` value to pick the optimal image from `srcset`. A malformed value causes the browser to fall back to a default size (typically `100vw`), which can result in downloading unnecessarily large images on small screens or blurry images on large screens.
- **Standards compliance**: Invalid `sizes` values violate the HTML specification and may behave unpredictably across different browsers.
- **Performance**: Correct `sizes` values are essential for responsive image optimization. Without them, you lose the bandwidth savings that `srcset` with width descriptors is designed to provide.
## How to Fix It
1. **Wrap every media condition in parentheses**: `(min-width: 600px)`, not `min-width: 600px`.
2. **Always include a valid CSS length after each condition**: `(min-width: 600px) 50vw`, not just `(min-width: 600px)`.
3. **End with a fallback length** that has no condition: `100vw`.
4. **Use valid CSS length units**: `vw`, `px`, `em`, `rem`, or `calc()` expressions.
5. **Remove trailing or duplicate commas**.
6. **Omit `sizes` entirely** if your `srcset` uses pixel-density descriptors (`1x`, `2x`).
## Examples
### Incorrect: missing parentheses around the media condition
```html
```
### Correct: parentheses added
```html
```
### Incorrect: missing length after the media condition
```html
```
The first entry `(min-width: 700px)` has no length value — the comma makes it look like a separate entry, but it's incomplete.
### Correct: length added after the condition
```html
```
### Incorrect: using `sizes` with pixel-density descriptors
```html
```
The `sizes` attribute is only meaningful with width descriptors (`w`). When `srcset` uses density descriptors (`1x`, `2x`), omit `sizes`.
### Correct: `sizes` removed for density descriptors
```html
```
### Incorrect: trailing comma
```html
```
### Correct: trailing comma removed
```html
```
### Using `sizes` on a `` inside ``
```html
```
### Using compound media conditions
You can combine conditions with `and`:
```html
```
### Full valid document
```html
Responsive Image Example
```
```
### Correct: parentheses added
```html
```
The first entry `(min-width: 700px)` has no length value — the comma makes it look like a separate entry, but it's incomplete.
### Correct: length added after the condition
```html
```
The `sizes` attribute is only meaningful with width descriptors (`w`). When `srcset` uses density descriptors (`1x`, `2x`), omit `sizes`.
### Correct: `sizes` removed for density descriptors
```html
```
### Correct: trailing comma removed
```html