# 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”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/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
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

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

## Valid example

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