HTML Guides for descriptor

Each image candidate in srcset is a URL followed by at most one descriptor, such as 800w or 2x, so any extra token before the next comma is an error.

Commas separate the candidates in srcset. The validator reads each candidate as a URL followed by one width descriptor (800w) or pixel density descriptor (2x). When a third token turns up, the message names it as the extraneous descriptor, and the part after at quotes the stretch of the value that ends with it. Browsers parse srcset with the same rules and skip that candidate.

An extraneous descriptor ending in =, such as loading=, usually means the closing quote of srcset is missing. The value runs on into the next attribute and stops at that attribute's opening quote, so loading= lands in the candidate list and the browser never sees a loading attribute. The validator also reports "No space between attributes" on the same element and rejects lazy" as an attribute name. Long values are left out of the message, which then starts with Bad value for attribute “srcset”.

If the extraneous descriptor is a file name, a comma is missing between two candidates. If it's a second descriptor, like 2x after 400w, keep only one: a candidate takes a width or a density, not both.

Invalid examples

The closing quote after 800w is missing, so loading= becomes part of the srcset value:

<img

src="photo-400.jpg"

srcset="photo-400.jpg 400w,

photo-800.jpg 800w

loading="lazy"

sizes="(max-width: 600px) 100vw, 600px"

alt="A mountain lake at sunrise">

Without a comma between the candidates, the second URL reads as a descriptor of the first:

<img

src="photo-400.jpg"

srcset="photo-400.jpg 400w photo-800.jpg 800w"

sizes="(max-width: 600px) 100vw, 600px"

alt="A mountain lake at sunrise">

Valid example

<img

src="photo-400.jpg"

srcset="photo-400.jpg 400w,

photo-800.jpg 800w"

loading="lazy"

sizes="(max-width: 600px) 100vw, 600px"

alt="A mountain lake at sunrise">