The “sizes” attribute value starting with “auto” is only valid for lazy-loaded images. The “img” element must have a “loading” attribute set to “lazy”.

A sizes value that starts with auto lets the browser work out an image's display size on its own, but the specification only permits it when the same <img> is lazy-loaded with loading="lazy".

The auto keyword removes the need to hand-write media-condition source sizes for a responsive image. For the browser to measure the rendered width and pick a candidate from srcset, the layout around the image has to already exist when the image is fetched. That holds for a lazy-loaded image, which is requested only as it approaches the viewport. An eagerly loaded image can be fetched before its box is laid out, so auto would have nothing to measure, and the validator rejects it.

To fix the error, add loading="lazy" to the same <img>. If the image has to load eagerly, such as a hero image at the top of the page, drop the auto keyword and give sizes explicit lengths instead.

Invalid example

<img
  srcset="small.jpg 480w, large.jpg 1024w"
  sizes="auto"
  src="large.jpg"
  alt="Product photo">

Valid example

<img
  srcset="small.jpg 480w, large.jpg 1024w"
  sizes="auto"
  loading="lazy"
  src="large.jpg"
  alt="Product photo">

Learn more:

MDN Reference

MDN - img element

→

MDN Reference

MDN - Lazy loading

→