# Bad value X for attribute “srcset” on element “img”: No width specified for image Y. (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-no-width-specified-for-image-y-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 multiple image sources so the browser can choose the most appropriate one based on the user's viewport size or screen density. There are two distinct modes for `srcset`:

1. **Width descriptor mode** — each candidate specifies its intrinsic width using a `w` descriptor (e.g., `400w`). This mode **requires** the `sizes` attribute so the browser knows how much space the image will occupy in the layout and can calculate which source to download.
2. **Pixel density descriptor mode** — each candidate specifies a pixel density using an `x` descriptor (e.g., `2x`). This mode must **not** include a `sizes` attribute.

When you include a `sizes` attribute but forget to add width descriptors to one or more `srcset` entries, the browser has incomplete information. The HTML specification explicitly states that if `sizes` is present, all image candidate strings must use width descriptors. An entry without a descriptor defaults to `1x` (a pixel density descriptor), which conflicts with the width descriptor mode triggered by `sizes`. This mismatch causes the W3C validator to report the error.

Beyond validation, this matters for real-world performance. Responsive images are one of the most effective tools for reducing page weight on smaller screens. If the descriptors are missing or mismatched, browsers may download an image that is too large or too small, hurting both performance and visual quality.

## How to fix it

You have two options depending on your use case:

### Option 1: Add width descriptors to all `srcset` candidates

If you need the browser to select images based on viewport size (the most common responsive images pattern), keep the `sizes` attribute and ensure every `srcset` entry has a `w` descriptor that matches the image's intrinsic pixel width.

### Option 2: Remove `sizes` and use pixel density descriptors

If you only need to serve higher-resolution images for high-DPI screens (e.g., Retina displays) and the image always renders at the same CSS size, remove the `sizes` attribute and use `x` descriptors instead.

## Examples

### ❌ Incorrect: `sizes` present but `srcset` entry has no width descriptor

```html
<img
  src="photo-800.jpg"
  srcset="photo-400.jpg, photo-800.jpg"
  sizes="(min-width: 600px) 800px, 100vw"
  alt="A mountain landscape">
```

Both `srcset` entries lack a width descriptor. Because `sizes` is present, the validator reports an error for each candidate.

### ✅ Correct: `sizes` present with width descriptors on every candidate

```html
<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w"
  sizes="(min-width: 600px) 800px, 100vw"
  alt="A mountain landscape">
```

Each candidate now specifies its intrinsic width (`400w` and `800w`), which tells the browser the actual pixel width of each source file. The browser combines this with the `sizes` value to pick the best match.

### ❌ Incorrect: mixing width descriptors and bare entries

```html
<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg"
  sizes="(min-width: 600px) 800px, 100vw"
  alt="A mountain landscape">
```

The second candidate (`photo-800.jpg`) is missing its width descriptor. **All** candidates must have one when `sizes` is present — not just some of them.

### ✅ Correct: pixel density descriptors without `sizes`

```html
<img
  src="photo-800.jpg"
  srcset="photo-800.jpg 1x, photo-1600.jpg 2x"
  alt="A mountain landscape">
```

Here the `sizes` attribute is removed, and each `srcset` entry uses a pixel density descriptor (`1x`, `2x`). This is valid and appropriate when the image always occupies the same CSS dimensions regardless of viewport width.

### ❌ Incorrect: using `sizes` with pixel density descriptors

```html
<img
  src="photo-800.jpg"
  srcset="photo-800.jpg 1x, photo-1600.jpg 2x"
  sizes="(min-width: 600px) 800px, 100vw"
  alt="A mountain landscape">
```

The `sizes` attribute and `x` descriptors cannot be combined. Either switch to `w` descriptors or remove `sizes`.

## Quick reference

| Pattern | `srcset` descriptor | `sizes` required? |
|---|---|---|
| Viewport-based selection | Width (`w`) | Yes |
| Density-based selection | Pixel density (`x`) | No — must be omitted |

Remember that the `w` value in `srcset` refers to the image file's intrinsic pixel width (e.g., an 800-pixel-wide image gets `800w`), while values in `sizes` use CSS length units like `px`, `vw`, or `em` to describe how wide the image will render in the layout.
