# Bad value “auto” 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-auto-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 the `srcset` attribute to help the browser choose the most appropriate image source for the current viewport and layout. Its value must follow a specific syntax: a comma-separated list where each entry is an optional media condition followed by a CSS length value. The final entry acts as a default and should be a length value without a media condition.
The value `"auto"` is not recognized as a valid CSS length or source size descriptor by the current HTML specification. While there is a newer `sizes="auto"` feature being developed for use specifically with `loading="lazy"` images, it is not yet universally part of the validated standard, and the W3C validator flags it as invalid. When the validator encounters `auto`, it expects a number (like `100vw` or `50px`) or a minus sign, but instead finds the letter "a", producing this error.
## Why This Matters
- **Standards compliance**: Using invalid attribute values means your HTML doesn't conform to the specification, which could lead to unpredictable behavior across browsers.
- **Responsive image loading**: When `sizes` contains an invalid value, browsers may fall back to the default value of `100vw`, which can cause them to download unnecessarily large images, hurting performance.
- **Accessibility and tooling**: Invalid HTML can cause issues with assistive technologies and automated tools that rely on well-formed markup.
## How to Fix It
You have several options depending on your use case:
1. **Specify explicit sizes** — Provide a valid source size list that describes how wide the image will be displayed at various viewport widths.
2. **Use a simple default** — Set `sizes` to a single CSS length like `"100vw"` if the image always spans the full viewport width.
3. **Remove `sizes` entirely** — If you don't use `srcset` with width descriptors, the `sizes` attribute is unnecessary and can be removed.
4. **Use `sizes="auto"` with `loading="lazy"`** — If you intentionally want the browser to determine sizes automatically for lazy-loaded images, be aware this is a newer feature that the validator may not yet support. You can suppress this specific warning if you've confirmed browser support meets your needs.
## Examples
### ❌ Invalid: Using `auto` as the sizes value
```html
```
This triggers the error because `auto` is not a valid CSS length or source size descriptor.
### ✅ Fixed: Using a responsive source size list
```html
```
This tells the browser: use 100% of the viewport width on screens up to 600px, 50% on screens up to 1000px, and 33% on larger screens. The browser then picks the best image from `srcset`.
### ✅ Fixed: Using a simple default size
```html
```
If the image always fills the full viewport width, `100vw` is a straightforward valid value.
### ✅ Fixed: Removing sizes when srcset is not used
```html
```
If you're not using `srcset` with width descriptors, the `sizes` attribute serves no purpose and can be safely removed. Without it, the browser defaults to `100vw` when interpreting any `srcset` width descriptors.
### ✅ Fixed: Using a fixed pixel width
```html
```
If the image is always displayed at a fixed width regardless of viewport size, you can specify that width directly as a CSS length value.