Bad value X for attribute “srcset” on element “source”: Starts with empty image-candidate string.

A srcset value that begins with a comma has an empty first image candidate, which usually means the URL that should come before that comma was never filled in.

srcset holds a comma-separated list of image candidate strings. Each one is a URL, optionally followed by a width descriptor such as 800w or a pixel density descriptor such as 2x. When the value starts with a comma, or with spaces and then a comma, nothing comes before the first separator, and the validator reports an empty candidate at the start of the list.

The usual source is a template that writes srcset="{{ image }}, {{ image_2x }} 2x" and prints the attribute even when the image fields are empty. With only the first field missing, the value becomes , hero-2x.webp 2x. With both missing, it becomes , 2x. Browsers skip the leading comma, so in that second case they read 2x as the image URL. Inside <picture>, the browser picks that <source> and requests a file called 2x instead of using the <img> fallback, and the image fails to load.

Fill in the missing URL, or leave the <source> out when there is no image for it. The <img> inside <picture> still provides the fallback.

Invalid example

<picture>
  <source srcset=", hero-2x.webp 2x" type="image/webp">
  <img src="hero.jpg" alt="A mountain lake at sunrise">
</picture>

Valid example

<picture>
  <source srcset="hero.webp, hero-2x.webp 2x" type="image/webp">
  <img src="hero.jpg" alt="A mountain lake at sunrise">
</picture>

When no WebP version exists, drop the <source>:

<picture>
  <img src="hero.jpg" alt="A mountain lake at sunrise">
</picture>

Learn more:

MDN Reference

MDN Web Docs: The source element

→

MDN Reference

MDN Web Docs: Responsive images

→

WHATWG Spec

HTML Living Standard: Images

→