メインコンテンツまでスキップ

no-unpaired-srcset-sizes

HTML Living Standard に基づき、<img> および <source> 要素の srcset の幅ディスクリプタと sizes 属性の相互必須関係をチェックします。

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

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

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

#制約対象
1sizes がある場合、srcset は 幅ディスクリプタ（w）のみ使用するimg, source
2srcset に幅ディスクリプタがある場合、sizes が必須img
32 と同じ、ただし後続兄弟 <img> が auto-sizes を許す（loading="lazy" かつ sizes="auto"）場合は除外source（<picture> 内）

動作​

  • <img> と <picture> 内の <source> 要素のみチェックします。
  • 動的な属性値（Vue の :srcset、JSX の srcset={...} など）やスプレッド属性を持つ要素はスキップされます。
  • ディスクリプタなしの画像候補（例: 480w や 2x のない image.png）は幅ディスクリプタとしてカウントされません。
  • 後続兄弟 <img> の sizes が auto と扱われるのは、値が auto であるか auto, で始まる場合のみです（大文字小文字不区別、前後の空白は除去しません）。auto 100vw は auto ではありません。

❌ 間違ったコード例

<!-- sizes + 密度ディスクリプタ -->
<img srcset="a.png 1x, b.png 2x" sizes="100vw" src="a.png" alt="写真" />

<!-- 幅ディスクリプタがあるのにsizesがない -->
<img srcset="a.png 480w, b.png 1024w" src="b.png" alt="写真" />

<!-- sourceで幅ディスクリプタがあるのにsizesがなく、兄弟imgがlazyでもない -->
<picture>
  <source srcset="a.webp 480w, b.webp 1024w" />
  <img src="a.jpg" alt="写真" />
</picture>

<!-- sourceで幅ディスクリプタがあるのにsizesがなく、兄弟imgはlazyだがsizesがautoではない -->
<picture>
  <source srcset="a.webp 480w, b.webp 1024w" />
  <img src="a.jpg" loading="lazy" alt="写真" />
</picture>

✅ 正しいコード例

<!-- 幅ディスクリプタとsizes -->
<img srcset="a.png 480w, b.png 1024w" sizes="(max-width: 600px) 480px, 1024px" src="b.png" alt="写真" />

<!-- sizesなしの密度ディスクリプタ -->
<img srcset="a.png 1x, b.png 2x" src="a.png" alt="写真" />

<!-- sourceで幅ディスクリプタとsizesなし、ただし兄弟imgがauto-sizesを許す -->
<picture>
  <source srcset="a.webp 480w, b.webp 1024w" />
  <img src="a.jpg" loading="lazy" sizes="auto" alt="写真" />
</picture>

参照​

Interface​

{
  "no-unpaired-srcset-sizes": boolean
}

Default Severity​

error