`sizes-auto-requires-lazy-loading`

HTML Living Standard に基づき、<img> および <source> 要素で sizes="auto" を使用する箇所では loading="lazy" を必須とします。<source> では、後続兄弟の <img> が自動サイズを許可する（sizes="auto" も持つ）必要もあります。

img要素は、次の場合に自動サイズを許可する：そのloading属性がLazy状態であり、かつ、そのsizes属性の値が"auto"（ASCII大文字・小文字不区別）である、または"auto,"（ASCII大文字・小文字不区別）で始まる。

HTML Living Standard: img要素の自動サイズの許可より引用

旧srcset-sizes-constraintルールから、no-unpaired-srcset-sizes、no-mixed-srcset-descriptors、no-always-matching-sourceとともに分割されました。

#	制約	対象
1	`<img>` の `sizes="auto"` には `loading="lazy"` が必須	`img`
2	`<source>` の `sizes="auto"` には後続兄弟の `<img>` に `loading="lazy"` と `sizes="auto"` が必須	`source`（`<picture>` 内）

動作

<img> と <picture> 内の <source> 要素のみ、かつ srcset 属性がある場合のみチェックします。
動的な属性値（Vue の :sizes、JSX の sizes={...} など）やスプレッド属性を持つ要素はスキップされます。
sizes="auto" は、属性値が auto であるか auto, で始まる場合に認識されます（大文字小文字不区別）。例えば sizes="auto, 100vw" は auto として扱われますが、sizes="100vw, auto" は auto として認識されません。

❌ 間違ったコード例

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

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

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

✅ 正しいコード例

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

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

参照

Interface

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

Default Severity

error

動作​

参照​

Interface​

Default Severity​

動作

参照

Interface

Default Severity