# Bad value “” for attribute “imagesrcset” on element “link”: Must contain one or more image candidate strings.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-for-attribute-imagesrcset-on-element-link-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 `imagesrcset` attribute is used exclusively on `<link>` elements that have `rel="preload"` and `as="image"`. It mirrors the `srcset` attribute of the `<img>` element, allowing the browser to preload the most appropriate image resource based on the current viewport and display conditions. When the validator encounters `imagesrcset=""` (an empty value), it reports this error because an empty string is not a valid source set — it must contain at least one image candidate string.

Each image candidate string in the `imagesrcset` value consists of a URL followed by an optional width descriptor (e.g., `480w`) or pixel density descriptor (e.g., `2x`). Multiple candidates are separated by commas. This is the same syntax used by the `srcset` attribute on `<img>` elements.

This issue typically arises when a CMS, static site generator, or templating engine outputs the `imagesrcset` attribute with an empty value — for example, when a responsive image field has no data. Browsers may ignore the malformed attribute, but it results in invalid HTML, can cause unexpected preloading behavior, and signals that the page's resource hints are misconfigured. Fixing it ensures standards compliance and that the browser's preload scanner works as intended.

## How to fix it

1. **Provide a valid source set** — populate `imagesrcset` with one or more image candidate strings.
2. **Remove the attribute** — if you don't have multiple image sources to preload, remove `imagesrcset` (and `imagesizes`) from the `<link>` element entirely. You can still preload a single image using just the `href` attribute.
3. **Conditionally render** — if your templating system might produce an empty value, add logic to omit the attribute when no responsive sources are available.

When using `imagesrcset`, you should also include the `imagesizes` attribute (mirroring the `sizes` attribute on `<img>`) so the browser can select the correct candidate based on layout information.

## Examples

### ❌ Empty `imagesrcset` triggers the error

```html
<link rel="preload" as="image" href="hero.jpg" imagesrcset="" imagesizes="">
```

The empty `imagesrcset` value is invalid and produces the W3C validation error.

### ✅ Valid `imagesrcset` with width descriptors

```html
<link
  rel="preload"
  as="image"
  href="hero-800.jpg"
  imagesrcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  imagesizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px">
```

This tells the browser to preload the most appropriate image based on the viewport width, matching the responsive behavior of the corresponding `<img>` element on the page.

### ✅ Valid `imagesrcset` with pixel density descriptors

```html
<link
  rel="preload"
  as="image"
  href="logo.png"
  imagesrcset="logo.png 1x, logo@2x.png 2x">
```

This preloads the correct logo variant based on the device's pixel density.

### ✅ Removing the attribute when no responsive sources exist

```html
<link rel="preload" as="image" href="hero.jpg">
```

If you only have a single image to preload, simply use `href` without `imagesrcset`. This is valid and avoids the error entirely.

### ✅ Conditional rendering in a template

If you're using a templating language, conditionally include the attribute:

```html
<!-- Pseudocode example -->
<link
  rel="preload"
  as="image"
  href="hero.jpg"
  {% if responsive_sources %}
    imagesrcset="{{ responsive_sources }}"
    imagesizes="{{ image_sizes }}"
  {% endif %}>
```

This prevents the attribute from being rendered with an empty value when no responsive image data is available.