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

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-x-for-attribute-srcset-on-element-source-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 `<source>` element is used inside `<picture>`, `<audio>`, or `<video>` elements to specify alternative media resources. When used inside a `<picture>` element, the `srcset` attribute is required and must contain one or more comma-separated image candidate strings. Each image candidate string consists of a URL and an optional descriptor — either a width descriptor like `400w` or a pixel density descriptor like `2x`.

This validation error typically occurs when:

- The `srcset` attribute is present but empty (`srcset=""`).
- The attribute value contains only whitespace.
- The value is malformed or contains syntax errors (e.g., missing URLs, invalid descriptors).
- A dynamic templating system or CMS outputs the attribute with no value.

### Why this matters

Browsers rely on the `srcset` attribute to select the most appropriate image to display based on the user's device capabilities, viewport size, and network conditions. An empty or invalid `srcset` means the browser cannot perform this selection, potentially resulting in no image being displayed at all. This degrades the user experience, harms accessibility (screen readers and assistive technologies may encounter unexpected behavior), and violates the HTML specification as defined by the WHATWG living standard.

### How to fix it

1. **Provide at least one valid image URL** in the `srcset` attribute.
2. **Optionally add descriptors** — use width descriptors (`w`) when combined with the `sizes` attribute, or pixel density descriptors (`x`) for fixed-size images.
3. **If you have no image to provide**, remove the `<source>` element entirely rather than leaving `srcset` empty.
4. **Check dynamic output** — if a CMS or templating engine generates the `srcset` value, add a conditional check to omit the `<source>` element when no images are available.

## Examples

### ❌ Empty `srcset` attribute

```html
<picture>
  <source srcset="" type="image/webp">
  <img src="photo.jpg" alt="A sunset over the ocean">
</picture>
```

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

### ❌ Invalid descriptor syntax

```html
<picture>
  <source srcset="photo.webp 400" type="image/webp">
  <img src="photo.jpg" alt="A sunset over the ocean">
</picture>
```

This is invalid because `400` is not a recognized descriptor — it must be `400w` or a density descriptor like `2x`.

### ✅ Single image candidate

```html
<picture>
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="A sunset over the ocean">
</picture>
```

A single URL without a descriptor is valid and serves as the default `1x` candidate.

### ✅ Multiple candidates with width descriptors

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

This provides three image candidates with width descriptors, allowing the browser to choose the best match based on the viewport and display density.

### ✅ Multiple candidates with pixel density descriptors

```html
<picture>
  <source srcset="photo.webp 1x, photo-2x.webp 2x" type="image/webp">
  <img src="photo.jpg" alt="A sunset over the ocean">
</picture>
```

Pixel density descriptors tell the browser which image to use based on the device's pixel ratio — `1x` for standard displays and `2x` for high-DPI (Retina) screens.

### ✅ Removing the source element when no image is available

If your application dynamically generates the `srcset` value and sometimes has no image to provide, omit the `<source>` element entirely:

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

This is valid because the `<img>` element inside `<picture>` serves as the required fallback and can stand alone.