Bad value X for attribute “sizes” on element “source”: Expected function (one of “calc”, “min”, “max”, “clamp”, “sin”, “cos”, “tan”, “asin”, “acos”, “atan”, “atan2”, “pow”, “sqrt”, “hypot”, “log”, “exp”, “abs”, “sign”) but found no name at Y.

The sizes attribute on a <source> element contains a media condition or length value with malformed syntax, likely a missing or misspelled CSS function name where one is expected.

The sizes attribute tells the browser how wide an image will be displayed under various layout conditions. Its value is a comma-separated list of entries, each consisting of an optional media condition and a length. The length portion must be a valid CSS length, which can include plain values like 50vw or 100px, but also CSS math functions like calc(), min(), max(), and clamp().

This error fires when the validator's parser hits a spot in the sizes value where it expects a CSS function name but finds something else. Common causes:

• A missing function name, such as writing (100vw - 2rem) instead of calc(100vw - 2rem). Parenthesized math expressions require an explicit calc() wrapper.
• A typo in a function name, like clac(...) instead of calc(...).
• Nesting errors or misplaced parentheses that confuse the parser about where a function should begin.

Invalid example

<picture>
  <source
    srcset="image-800.jpg 800w, image-1200.jpg 1200w"
    sizes="(min-width: 768px) (100vw - 4rem), 100vw"
    type="image/jpeg">
  <img src="image-800.jpg" alt="A mountain landscape">
</picture>

The expression (100vw - 4rem) is not a valid CSS length on its own. The validator expects a function name before the opening parenthesis.

Fixed example

<picture>
  <source
    srcset="image-800.jpg 800w, image-1200.jpg 1200w"
    sizes="(min-width: 768px) calc(100vw - 4rem), 100vw"
    type="image/jpeg">
  <img src="image-800.jpg" alt="A mountain landscape">
</picture>

Wrapping the arithmetic in calc() makes it a valid CSS length expression and resolves the validation error.

Learn more:

MDN Reference

HTML source element: sizes attribute

→

MDN Reference

Responsive images

→

MDN Reference

HTML img element: sizes attribute

→