Bad value X for attribute “fetchpriority” on element “img”.

The fetchpriority attribute of an <img> is set to something other than high, low or auto.

fetchpriority is a hint about how soon the browser should fetch the image compared with the other images on the page. high suits the main image at the top of the page, low suits images that start out of view, such as the later slides of a carousel, and auto, the default, leaves the choice to the browser. The value has to be one of those three keywords with nothing around it. A made-up level such as highest, a keyword that belongs to another attribute such as eager (that one goes in loading) and an empty value all trigger this error.

When the reported value includes quotes, as in "high", the quotes are inside the value itself. That usually happens when the quotes around the value were HTML-encoded as ", often by a plugin or template that escaped markup a second time. " can't delimit an attribute, so the parser reads fetchpriority="high" as an unquoted value and decodes both references into literal quotes. Wrapping the value in two sets of quotes, as in fetchpriority='"high"', gives the same result. A value with only a trailing quote, such as high", means the opening quote is missing, and the validator also reports “"” in an unquoted attribute value.

Browsers treat an invalid value as auto, so the image still loads, but at the default priority. A hero image meant to be high can then start downloading later than intended. If you don't need a particular priority, remove the attribute.

The " cause rarely affects fetchpriority alone. If decoding, width, height, srcset or sizes on the same <img> also report a stray ", fix the code that writes the tag instead of editing each attribute.

Invalid example

<img src="hero.jpg" alt="A mountain lake at sunrise" width="1200" height="600" fetchpriority=&quot;high&quot;>
<img src="hero.jpg" alt="A mountain lake at sunrise" width="1200" height="600" fetchpriority="highest">

Valid example

<img src="hero.jpg" alt="A mountain lake at sunrise" width="1200" height="600" fetchpriority="high">

Learn more:

MDN Reference

MDN Web Docs: The image embed element

→

MDN Reference

MDN Web Docs: HTMLImageElement fetchPriority property

→

web.dev Article

web.dev: Optimize resource loading with the Fetch Priority API

→