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

no-unpaired-srcset-sizes

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

旧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> に loading="lazy"（auto-sizes 対応）があれば除外source（<picture> 内）

動作​

  • <img> と <picture> 内の <source> 要素のみチェックします。
  • 動的な属性値（Vue の :srcset、JSX の srcset={...} など）やスプレッド属性を持つ要素はスキップされます。
  • ディスクリプタなしの画像候補（例: 480w や 2x のない image.png）は幅ディスクリプタとしてカウントされません。

❌ 間違ったコード例

<!-- 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>

✅ 正しいコード例

<!-- 幅ディスクリプタと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がlazy -->
<picture>
  <source srcset="a.webp 480w, b.webp 1024w" />
  <img src="a.jpg" loading="lazy" alt="写真" />
</picture>

参照​

Interface​

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

Default Severity​

error