# Bad value “” for attribute “sizes” on element “img”: Must not be empty.
> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-for-attribute-sizes-on-element-img-must-not-be-empty
> 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 before the page layout is calculated. It describes how wide the image will be displayed under various viewport conditions, allowing the browser to pick an optimally sized image from the candidates listed in `srcset`. According to the HTML specification, the value of `sizes` must be a valid source size list — a comma-separated set of media conditions paired with lengths, with a default length at the end. An empty string (`""`) does not satisfy this requirement and is therefore invalid.
When the browser encounters an empty `sizes` attribute, it cannot determine the intended display width of the image. This defeats the purpose of responsive images and may cause the browser to fall back to a default behavior (typically assuming `100vw`), which could result in downloading an unnecessarily large image. Beyond the functional issue, an empty attribute signals a code quality problem — it often means a template is outputting the attribute even when no value has been configured.
### Why this matters
- **Standards compliance:** The HTML specification explicitly requires `sizes` to be a non-empty, valid source size list when present. An empty value is a parse error.
- **Performance:** Without a proper `sizes` value, the browser cannot make an informed decision about which `srcset` candidate to download. This can lead to wasted bandwidth and slower page loads, especially on mobile devices.
- **Code quality:** Empty attributes clutter your markup and suggest missing configuration, making the code harder to maintain.
### How to fix it
1. **Provide a valid `sizes` value** that describes how wide the image will actually render at different viewport widths.
2. **Remove `sizes` entirely** if you are not using width descriptors (`w`) in `srcset`. When `srcset` uses pixel density descriptors (`1x`, `2x`), the `sizes` attribute is not needed.
3. **Remove both `sizes` and `srcset`** if you don't need responsive image selection at all.
## Examples
### ❌ Empty `sizes` attribute
```html
```
The empty `sizes=""` triggers the validation error.
### ✅ Valid `sizes` with a single default value
If the image always takes up the full viewport width:
```html
```
### ✅ Valid `sizes` with media conditions
If the image displays at different widths depending on the viewport:
```html
```
This tells the browser: use `100vw` on viewports up to 600px, `50vw` up to 1024px, and `33vw` otherwise.
### ✅ Removing `sizes` when using density descriptors
When `srcset` uses density descriptors instead of width descriptors, `sizes` is not applicable and should be omitted:
```html
```
### ✅ Removing both attributes when not needed
If responsive image selection isn't required, simply use a standard `![]()
`:
```html
```
### Common template fix
If your CMS or templating system conditionally outputs these attributes, ensure the `sizes` attribute is only rendered when it has a value. For example, in a template:
```html
```