# Bad value X for attribute “srcset” on element “source”: 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-source-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 supports two types of descriptors: **width descriptors** (e.g., `480w`) and **pixel density descriptors** (e.g., `2x`). These two types cannot be mixed, and the `sizes` attribute is specifically designed to work with width descriptors. The `sizes` attribute tells the browser how wide the image will be displayed at various viewport sizes, so the browser can then pick the best image from `srcset` based on the widths you've provided. If any candidate in `srcset` lacks a width descriptor — or uses a density descriptor instead — the browser can't perform this calculation, and the HTML is invalid.

This matters for several reasons. First, browsers rely on the combination of `sizes` and width descriptors to make intelligent decisions about which image to download before the layout is computed. An invalid `srcset` can lead to the browser ignoring the entire attribute or selecting a suboptimal image, wasting bandwidth or displaying a blurry result. Second, standards compliance ensures consistent behavior across all browsers and devices.

A common mistake is specifying `sizes` while using density descriptors (`1x`, `2x`) or providing bare URLs without any descriptor in `srcset`. If you want to use density descriptors, simply remove the `sizes` attribute. If you want responsive image selection based on viewport width, use width descriptors for every candidate.

## Examples

### Incorrect: Using density descriptors with `sizes`

```html
<picture>
  <source
    srcset="image-small.jpg 1x, image-large.jpg 2x"
    sizes="(max-width: 600px) 100vw, 50vw">
  <img src="image-small.jpg" alt="A landscape photo">
</picture>
```

This triggers the error because `1x` and `2x` are density descriptors, but the `sizes` attribute requires width descriptors.

### Incorrect: Missing descriptor on one candidate

```html
<picture>
  <source
    srcset="image-small.jpg, image-large.jpg 800w"
    sizes="(max-width: 600px) 100vw, 50vw">
  <img src="image-small.jpg" alt="A landscape photo">
</picture>
```

Here, `image-small.jpg` has no descriptor at all. When `sizes` is present, every candidate must have a width descriptor.

### Correct: All candidates use width descriptors with `sizes`

```html
<picture>
  <source
    srcset="image-small.jpg 400w, image-large.jpg 800w"
    sizes="(max-width: 600px) 100vw, 50vw">
  <img src="image-small.jpg" alt="A landscape photo">
</picture>
```

Each image candidate now specifies a width descriptor (`400w`, `800w`), which matches the requirement imposed by the `sizes` attribute.

### Correct: Using density descriptors without `sizes`

If you only need density-based selection (e.g., for retina displays) and don't need viewport-based sizing, remove the `sizes` attribute entirely:

```html
<picture>
  <source srcset="image-small.jpg 1x, image-large.jpg 2x">
  <img src="image-small.jpg" alt="A landscape photo">
</picture>
```

### Correct: Using `srcset` with width descriptors on `<img>`

The same rules apply when using `srcset` directly on an `<img>` element:

```html
<img
  srcset="photo-320.jpg 320w, photo-640.jpg 640w, photo-1024.jpg 1024w"
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
  src="photo-640.jpg"
  alt="A mountain landscape">
```

Every candidate in `srcset` includes a width descriptor, making this fully valid alongside the `sizes` attribute. The `src` attribute serves as the fallback for browsers that don't support `srcset`.