# Bad value X for attribute “srcset” on element “img”: Expected width descriptor but found Y at Z. (When the “sizes” attribute is present, all image candidate strings must specify a width.)

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-x-for-attribute-srcset-on-element-img-expected-width-descriptor-but-found-y-at-z-when-the-sizes-attribute-is-present-all-image-candidate-strings-must-specify-a-width
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `srcset` attribute allows you to provide the browser with a set of image sources to choose from based on the user's viewport size or display density. Each entry in `srcset` is called an **image candidate string** and consists of a URL followed by an optional descriptor — either a **width descriptor** (like `300w`) or a **pixel density descriptor** (like `2x`).

The `sizes` attribute tells the browser what display size the image will occupy at various viewport widths, using media conditions and length values. The browser uses this size information together with the width descriptors in `srcset` to select the most appropriate image. This is why the HTML specification requires that when `sizes` is present, **all** `srcset` entries must use width descriptors — without them, the browser cannot perform the size-based selection that `sizes` is designed to enable.

This error typically appears in three situations:

1. **A `srcset` entry has no descriptor at all** — the URL is listed without any accompanying width or density value.
2. **A pixel density descriptor (`x`) is used alongside `sizes`** — mixing `sizes` with `x` descriptors is invalid because the two mechanisms are mutually exclusive.
3. **A typo or formatting issue** — for example, writing `600px` instead of `600w`, or placing a comma incorrectly.

### Why this matters

- **Standards compliance:** The [WHATWG HTML Living Standard](https://html.spec.whatwg.org/multipage/images.html#srcset-attributes) explicitly states that when `sizes` is specified, all image candidates must use width descriptors.
- **Correct image selection:** Without proper width descriptors, browsers cannot accurately determine which image to download. This may lead to unnecessarily large downloads on small screens or blurry images on large screens.
- **Performance:** Responsive images are a key performance optimization. A malformed `srcset` defeats the purpose and can result in wasted bandwidth.

### How to fix it

1. **Determine the intrinsic width** (in pixels) of each image file listed in `srcset`.
2. **Append the width descriptor** to each URL in the format `[width]w`, where `[width]` is the image's actual pixel width.
3. **Ensure no entries use `x` descriptors** when `sizes` is present. If you need density descriptors, remove the `sizes` attribute entirely.
4. **Make sure every entry has a descriptor** — bare URLs without any descriptor are invalid when `sizes` is used.

## Examples

### Missing width descriptor

This triggers the validation error because the `srcset` URL has no width descriptor:

```html
<img
  src="/img/photo.jpg"
  srcset="/img/photo.jpg"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="A sunset over the mountains"
>
```

**Fixed** by adding the width descriptor:

```html
<img
  src="/img/photo.jpg"
  srcset="/img/photo.jpg 600w"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="A sunset over the mountains"
>
```

### Using pixel density descriptors with `sizes`

This is invalid because `x` descriptors cannot be combined with the `sizes` attribute:

```html
<img
  src="/img/photo.jpg"
  srcset="/img/photo.jpg 1x, /img/photo-2x.jpg 2x"
  sizes="(max-width: 800px) 100vw, 800px"
  alt="A sunset over the mountains"
>
```

**Fixed** by switching to width descriptors:

```html
<img
  src="/img/photo.jpg"
  srcset="/img/photo.jpg 800w, /img/photo-2x.jpg 1600w"
  sizes="(max-width: 800px) 100vw, 800px"
  alt="A sunset over the mountains"
>
```

Alternatively, if you only need density-based selection and don't need `sizes`, remove it:

```html
<img
  src="/img/photo.jpg"
  srcset="/img/photo.jpg 1x, /img/photo-2x.jpg 2x"
  alt="A sunset over the mountains"
>
```

### Multiple image sources with width descriptors

A complete responsive image setup with several sizes:

```html
<img
  src="/img/photo-800.jpg"
  srcset="
    /img/photo-400.jpg 400w,
    /img/photo-800.jpg 800w,
    /img/photo-1200.jpg 1200w
  "
  sizes="(max-width: 480px) 100vw, (max-width: 960px) 50vw, 800px"
  alt="A sunset over the mountains"
>
```

Each URL is paired with a `w` descriptor that matches the image's intrinsic pixel width. The `sizes` attribute then tells the browser how wide the image will display at each breakpoint, allowing it to pick the best candidate.
