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

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

<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

<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

<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

<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:

<!-- 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.

Learn more:

MDN Reference

MDN: link

→

WHATWG Spec

HTML Spec: sourceset attribute

→

web.dev Article

web.dev: Preloading responsive images

→