sizes-auto-requires-lazy-loading

Requires loading="lazy" wherever sizes="auto" is used on <img> and <source> elements, per the HTML Living Standard. A <source> also needs the following sibling <img> to have sizes="auto", because only such an <img> allows auto-sizes.

An img element allows auto-sizes if: its loading attribute is in the Lazy state, and its sizes attribute's value is "auto" (ASCII case-insensitive), or starts with "auto," (ASCII case-insensitive).

Cite: HTML Living Standard: An img element allows auto-sizes

Split out of the former srcset-sizes-constraint rule, alongside no-unpaired-srcset-sizes, no-mixed-srcset-descriptors, and no-always-matching-source.

#	Constraint	Target
1	sizes="auto" on <img> requires loading="lazy"	img
2	sizes="auto" on <source> requires the following sibling <img> to have loading="lazy" and sizes="auto"	source (in <picture>)

How It Works

• Only <img> and <source> elements inside <picture> are checked, and only when the element has a srcset attribute. On an <img> without srcset, sizes is allowed only as the value auto with loading="lazy": no-disallowed-attr reports a sizes without loading="lazy", and no-invalid-attr-value reports a value other than auto. A dynamic sizes is still reported by no-disallowed-attr when the image has no loading attribute or a loading other than lazy; when loading is dynamic, whether the image is lazily loaded is not judged.
• Dynamic attribute values (e.g., Vue :sizes="x", JSX sizes={x}) and elements with spread attributes are skipped. A literal written as code (sizes={"auto"}) is evaluated as the value that the framework renders it to; a literal that the framework does not output (null, false) or renders in a way that is not known is skipped, as a dynamic value is.
• sizes="auto" is recognized when the attribute value is auto or starts with auto, (case-insensitive). For example, sizes="auto, 100vw" is treated as auto, but sizes="100vw, auto" is not.

❌ Examples of incorrect code for this rule

<img srcset="a.png 480w" sizes="auto" src="a.png" alt="photo" />

<picture>
  <source srcset="a.webp 480w" sizes="auto" />
  <img src="a.jpg" alt="photo" />
</picture>

<picture>
  <source srcset="a.webp 480w" sizes="auto" />
  <img src="a.jpg" loading="lazy" alt="photo" />
</picture>

✅ Examples of correct code for this rule

<img srcset="a.png 480w" sizes="auto" loading="lazy" src="a.png" alt="photo" />

<picture>
  <source srcset="a.webp 480w" sizes="auto" />
  <img src="a.jpg" loading="lazy" sizes="auto" alt="photo" />
</picture>

References

• HTML Living Standard - The img element
• HTML Living Standard - The source element
• HTML Living Standard - An img element allows auto-sizes

Interface

{
  "sizes-auto-requires-lazy-loading": boolean
}

Default Severity

error