# When the “srcset” attribute has any image candidate string with a width descriptor, the “sizes” attribute must also be specified.
> Canonical HTML version: https://rocketvalidator.com/html-validation/when-the-srcset-attribute-has-any-image-candidate-string-with-a-width-descriptor-the-sizes-attribute-must-also-be-specified
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
The `srcset` attribute lets you provide multiple image sources so the browser can select the most appropriate one. There are two types of descriptors you can use in `srcset`: **pixel density descriptors** (e.g., `1x`, `2x`) and **width descriptors** (e.g., `400w`, `800w`). When you use pixel density descriptors, the browser already knows the relationship between each source — it simply picks the one matching the device's pixel ratio. But width descriptors work differently. They tell the browser the intrinsic pixel width of each image file, and the browser then needs to know how wide the image will actually be rendered on screen to calculate which file is the best fit. That's exactly what the `sizes` attribute provides.
The `sizes` attribute accepts a comma-separated list of media conditions paired with length values, plus a default length. For example, `sizes="(max-width: 600px) 100vw, 50vw"` tells the browser: "If the viewport is 600px wide or less, this image will occupy 100% of the viewport width; otherwise, it will occupy 50%." Armed with this information and the width descriptors in `srcset`, the browser can do the math and download only the most suitable image — before CSS or layout has even been calculated.
### Why this matters
- **Standards compliance:** The HTML specification requires `sizes` whenever `srcset` uses width descriptors. Omitting it produces invalid HTML.
- **Correct image selection:** Without `sizes`, browsers fall back to assuming the image will be `100vw` wide, which often leads to downloading unnecessarily large images on desktop layouts where the image is much smaller than the full viewport.
- **Performance:** Serving oversized images wastes bandwidth and slows page load. A proper `sizes` attribute ensures the browser downloads the smallest sufficient image.
- **Predictable behavior:** Relying on the browser's fallback assumption (`100vw`) makes your responsive images behave inconsistently and defeats the purpose of providing multiple candidates.
### How to fix it
1. Identify every `img` (or `source`) element that uses width descriptors in `srcset`.
2. Determine how wide the image will be displayed at different viewport sizes. You can inspect this with your browser's developer tools or by reviewing your CSS.
3. Add a `sizes` attribute that describes those widths using media conditions and CSS length values like `px`, `vw`, `em`, or `calc()` expressions.
## Examples
### Incorrect — missing `sizes` with width descriptors
```html
```
This triggers the validation error because the browser sees width descriptors (`400w`, `800w`, `1200w`) but has no `sizes` attribute to determine the image's rendered width.
### Correct — `sizes` attribute added
```html
```
Here, the `sizes` attribute tells the browser:
- On viewports up to 600px wide, the image fills 100% of the viewport.
- On viewports between 601px and 1000px, the image fills 50% of the viewport.
- On larger viewports, the image is displayed at a fixed 600px width.
### Correct — pixel density descriptors (no `sizes` needed)
```html
```
When using pixel density descriptors (`1x`, `2x`) instead of width descriptors, the `sizes` attribute is not required. The browser simply matches the descriptor to the device's pixel ratio.
### Correct — using `sizes` with a `` element
```html
```
The `sizes` attribute is required on both the `source` and `img` elements when either uses width descriptors in its `srcset`.
```
This triggers the validation error because the browser sees width descriptors (`400w`, `800w`, `1200w`) but has no `sizes` attribute to determine the image's rendered width.
### Correct — `sizes` attribute added
```html
```
When using pixel density descriptors (`1x`, `2x`) instead of width descriptors, the `sizes` attribute is not required. The browser simply matches the descriptor to the device's pixel ratio.
### Correct — using `sizes` with a `