The “sizes” attribute value starting with “auto” is only valid for lazy-loaded images. Add “loading="lazy"” to this element.

The sizes attribute has a value starting with auto, but the image is not lazy-loaded. A sizes value of auto only works together with loading="lazy".

sizes="auto" tells the browser to pick the srcset candidate that matches the image's actual rendered width, instead of you writing out media conditions by hand. The browser can only know that width after it has laid the image out on the page, which is exactly the point at which a lazy-loaded image is fetched. For an image that loads eagerly, the width is not available in time, so the specification restricts auto to elements that also carry loading="lazy".

To fix the error, add the loading attribute to the same element:

<img
  srcset="photo-400.jpg 400w, photo-800.jpg 800w"
  sizes="auto"
  loading="lazy"
  alt="A field of sunflowers">

If the image needs to load eagerly, for example a hero image above the fold, drop auto and give sizes an explicit value instead:

<img
  srcset="photo-400.jpg 400w, photo-800.jpg 800w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="A field of sunflowers">

Learn more:

MDN Reference

MDN - Lazy loading

→

MDN Reference

MDN - The img element

→

WHATWG Spec

HTML Standard - Images

→