# Bad value X for attribute “sizes” on element “img”: Bad CSS number token: Expected a minus sign or a digit but saw “a” instead at “auto,”.
> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-x-for-attribute-sizes-on-element-img-bad-css-number-token-expected-a-minus-sign-or-a-digit-but-saw-a-instead-at-auto
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
The `sizes` attribute works together with `srcset` to help the browser choose the most appropriate image source for the current layout. It accepts a comma-separated list of entries, where each entry is an optional media condition followed by a CSS length value (called a "source size value"). The browser evaluates these entries to determine the intended display width of the image before it downloads it. Valid length values include viewport-relative units like `100vw`, absolute units like `472px`, or `calc()` expressions like `calc(100vw - 2rem)`.
The value `auto` was not part of the original HTML specification for the `sizes` attribute. However, the `sizes="auto"` value has been added to the HTML living standard specifically for use with lazy-loaded images (`loading="lazy"`). When both `loading="lazy"` and `sizes="auto"` are present, the browser can defer size calculation until layout time, since the image won't be fetched immediately anyway. Some validators may not yet recognize this newer addition, or the error may appear because `auto` is being used without `loading="lazy"`, or combined incorrectly with other size entries like `sizes="auto, 100vw"`.
This validation error matters for several reasons. First, if the browser doesn't understand the `sizes` value, it may fall back to a default of `100vw`, which could cause it to download a larger image than necessary, hurting performance. Second, malformed attribute values can lead to unpredictable behavior across different browsers. Third, standards compliance ensures your markup works reliably now and in the future.
## How to Fix
You have a few options depending on your situation:
1. **Replace `auto` with a valid CSS length.** If you know the intended display size of the image, specify it directly. This is the most broadly compatible approach.
2. **Use `sizes="auto"` only with `loading="lazy"`.** If you want the browser to automatically determine the size, ensure you also include `loading="lazy"` and a `width` attribute on the image. Note that some validators may still flag this until they update their rules.
3. **Remove `auto` from a comma-separated list.** If you have something like `sizes="auto, (max-width: 600px) 100vw, 50vw"`, remove the `auto` entry entirely.
## Examples
### Incorrect: Using `auto` without lazy loading
This triggers the validation error because `auto` is not a valid CSS length in the traditional `sizes` syntax.
```html
```
### Fixed: Using a valid CSS length value
Replace `auto` with a concrete size or a set of media-conditioned sizes.
```html
```
In this example, when the viewport is 472 pixels wide or smaller, the image takes up the full viewport width (`100vw`). For wider viewports, the browser knows the image will display at `472px` wide and selects the best source from `srcset` accordingly.
### Fixed: Using `auto` with lazy loading
If you want the browser to determine the display size automatically, pair `sizes="auto"` with `loading="lazy"` and explicit dimensions.
```html
```
The `width` and `height` attributes help the browser reserve the correct space in the layout, and `loading="lazy"` allows the browser to defer both loading and size calculation until the image is near the viewport.
### Fixed: Using `calc()` for dynamic sizing
If your image sits inside a container with padding, you can use `calc()` for a precise size hint.
```html
```