Bad value “auto, X” for attribute “sizes” on element “source”: Bad CSS number token: Expected a minus sign or a digit but saw “a” instead at “auto,”.

The auto keyword is not a valid value for the sizes attribute on a <source> element according to the W3C HTML validator.

This error typically appears when sizes="auto, ..." is used, often copied from lazy-loading patterns. The sizes attribute expects a comma-separated list of entries, where each entry is an optional media condition followed by a CSS length value. The value auto is not a recognized CSS length or source size descriptor, so the validator flags it whether used alone or combined with other entries.

To fix this, remove auto from the sizes attribute and use explicit media conditions with CSS length values instead.

How to fix

This source triggers the validation error:

<picture>
  <source
    srcset="image-640.jpg 640w, image-1024.jpg 1024w"
    sizes="auto, (max-width: 1024px) 100vw, 1024px">
  <img src="image-1024.jpg" alt="Example" loading="lazy">
</picture>

Remove auto and use explicit media conditions:

<picture>
  <source
    srcset="image-640.jpg 640w, image-1024.jpg 1024w"
    sizes="(max-width: 1024px) 100vw, 1024px">
  <img src="image-1024.jpg" alt="Example" loading="lazy">
</picture>

Learn more:

MDN Reference

MDN: Responsive images - sizes attribute

→

MDN Reference

MDN: Responsive images

→

WHATWG Spec

WHATWG: The source element

→