# Bad value X for attribute “srcset” on element “img”: Must contain one or more image candidate strings.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-x-for-attribute-srcset-on-element-img-must-contain-one-or-more-image-candidate-strings
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `srcset` attribute allows you to specify multiple image sources so the browser can choose the most appropriate one based on the user's device characteristics, such as screen resolution or viewport width. When you include a `srcset` attribute on an `<img>` element, the HTML specification requires it to contain one or more comma-separated image candidate strings. Each string consists of a URL followed by an optional descriptor — either a width descriptor (e.g., `200w`) or a pixel density descriptor (e.g., `2x`).

This validation error typically appears when:

- The `srcset` attribute is empty (`srcset=""`)
- The `srcset` attribute contains only whitespace (`srcset=""`)
- The value contains syntax errors such as missing URLs, invalid descriptors, or incorrect formatting
- A templating engine or CMS outputs the attribute with no value

This matters because browsers rely on the `srcset` value to select the best image to load. An empty or malformed `srcset` means the browser must fall back entirely to the `src` attribute, making the `srcset` attribute pointless. Additionally, invalid markup can cause unexpected behavior across different browsers and undermines standards compliance.

## How to fix it

1. **Provide valid image candidate strings.** Each entry needs a URL and optionally a width or pixel density descriptor, with entries separated by commas.
2. **Remove the attribute entirely** if you don't have multiple image sources to offer. A plain `src` attribute is perfectly fine on its own.
3. **Check dynamic output.** If a CMS or templating system generates the `srcset`, ensure it conditionally omits the attribute when no responsive image candidates are available, rather than outputting an empty attribute.

## Examples

### ❌ Empty `srcset` attribute

```html
<img src="/img/photo.jpg" alt="A sunset over the ocean" srcset="">
```

This triggers the error because `srcset` is present but contains no image candidate strings.

### ❌ Malformed `srcset` value

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

This is invalid because each candidate string must include a URL. Descriptors alone are not valid entries.

### ✅ Using pixel density descriptors

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

Each candidate string contains a URL followed by a pixel density descriptor (`1x`, `2x`). The browser picks the best match for the user's display.

### ✅ Using width descriptors with `sizes`

```html
<img
  src="/img/photo-400.jpg"
  alt="A sunset over the ocean"
  srcset="
    /img/photo-400.jpg 400w,
    /img/photo-800.jpg 800w,
    /img/photo-1200.jpg 1200w
  "
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px">
```

Width descriptors (e.g., `400w`) tell the browser the intrinsic width of each image. The `sizes` attribute then tells the browser how large the image will be displayed at various viewport sizes, allowing it to calculate the best source to download.

### ✅ Removing `srcset` when not needed

```html
<img src="/img/photo.jpg" alt="A sunset over the ocean">
```

If you only have a single image source, simply omit `srcset` altogether. The `src` attribute alone is valid and sufficient.

### ✅ Single candidate in `srcset`

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

Even a single image candidate string is valid. Here, the browser will use the high-resolution image on `2x` displays and fall back to `src` otherwise.