HTML Guides for 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">