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

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-sizes-attribute-value-starting-with-auto-is-only-valid-for-lazy-loaded-images-add-loading-lazy-to-this-element
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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:

```html
<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:

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