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.
• Dynamic attribute values (e.g., Vue :sizes, JSX sizes={...}) and elements with spread attributes are skipped.
• 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