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

no-mixed-srcset-descriptors

HTML Living Standard に基づき、<img> および <source> 要素の単一の srcset 属性内で w)と ピクセル密度x)のディスクリプタを混在させることを禁止します。

srcset-sizes-constraintルールから、no-unpaired-srcset-sizessizes-auto-requires-lazy-loadingno-always-matching-sourceとともに分割されました。

動作

  • <img><picture> 内の <source> 要素のみチェックします。
  • 動的な属性値(Vue の :srcset、JSX の srcset={...} など)やスプレッド属性を持つ要素はスキップされます。
  • ディスクリプタなしの画像候補(例: 480w2x のない image.png)は暗黙の 1x 密度ディスクリプタとして扱われます。

❌ 間違ったコード例

<img srcset="a.png 480w, b.png 2x" src="a.png" alt="写真" />

✅ 正しいコード例

<!-- すべて幅ディスクリプタ -->
<img srcset="a.png 480w, b.png 1024w" sizes="100vw" src="b.png" alt="写真" />

<!-- すべてピクセル密度ディスクリプタ -->
<img srcset="a.png 1x, b.png 2x" src="a.png" alt="写真" />

no-invalid-attr-value との重複について

このルールは、no-invalid-attr-value ルールが使用する Srcset 型バリデータと重複します。両方のルールが有効な場合、幅ディスクリプタと密度ディスクリプタの混在が両方のルールから報告される可能性があります。これは意図的な動作です — no-invalid-attr-valuesrcset 属性値の構文を検証し、このルールは属性間の制約をチェックします。重複報告を避けたい場合は、このチェックについては no-invalid-attr-value のみに頼ることができます。

参照

Interface

{
"no-mixed-srcset-descriptors": boolean
}

Default Severity

error