srcsetと解像度についての疑問

Question

<img srcset="img150.jpg 150w,img300.jpg 300w,img450.jpg 450w,img.jpg" sizes="150px"/>

のようなコードの場合
1dppxの画面ならimg150.jpg
2dppxの画面ならimg300.jpg
3dppxの画面ならimg450.jpg
が表示されるものと思います

しかし

<img srcset="img150.jpg 150w,img.jpg" sizes="150px"/>

のようなコードの場合
1~3dppxの画面いずれでもimg150.jpgが表示されます

これはつまりdppxを加味した実際の画像のpx寸での判定の後に
dppxを無視したpx寸での判定も行なっているものと推測するのですが
これは仕様なのでしょうか？

すべてのブラウザにおいて普遍的な挙動と認識して良いですか？

Answer 1

これは仕様なのでしょうか？

そもそも書き方が妥当ではありません。

srcsetには「画像幅（100w）」あるいは「ピクセル倍率（2x）」を指定できます。

そして、何も書かなかった場合は1xとみなされるのですが、幅とピクセル倍率を1つのsrcsetに混ぜてはならないことになっています（MDN、HTML LS）。

（エラーの場合どう処理されるかも規定されているかもしれませんが、そこまで読み切れていないです）

Comments

[KazuhiroHatano]

回答ありがとうございます

疑問に思った挙動に関わる部分のみ抽出しているため
htmlのコードとして妥当でない点についてはご容赦ください

[maisumakun]

> 疑問に思った挙動に関わる部分のみ抽出しているため
htmlのコードとして妥当でない点についてはご容赦ください

では、「妥当でない」ことを承知の上でなおも挙動を知りたい理由は何でしょうか。こう書かなければならない、特殊な事情があるのでしょうか。

[maisumakun]

「User agents are encouraged to expose parse errors somehow.」となっているだけで、具体的な内容は規定されていないようです。

[maisumakun]

> すべてのブラウザにおいて普遍的な挙動と認識して良いですか？

いいえ。

[KazuhiroHatano]

>挙動を知りたい理由

この挙動が仕様であればそれを利用したいです

そうでないならこれは
仕様を文面通りに読んだ場合に期待に反する挙動なので
それに留意してコーディングをする必要があります

[maisumakun]

「仕様を文面通りに読んだ場合」は「書き方が悪い」という結論になるかと思うのですが。

[KazuhiroHatano]

wとxの指定の混在についてはまあそうなのですが・・・

仕様によればwの指定はピクセル密度で割った値で評価されるとなっていますが
どうも実際そうじゃないケースがあるということで
これが仕様なのかについて知っておきたかった次第です

しかし仕様にはない挙動なようですね

ありがとうございました

[maisumakun]

> 仕様によればwの指定はピクセル密度で割った値で評価されるとなっていますが

評価以前の問題として、「srcsetが矛盾しているため、矛盾した2個目（img.jpg 1x）が無視されて、1つだけ指定されている」ようなエラー処理が行われたのではないかと想像しました。

[maisumakun]

（というより、ピクセル密度からの計算が合わないほうが聞きたいことだったのですね）

[KazuhiroHatano]

＞　矛盾した2個目（img.jpg 1x）が無視

sizes="151px"と指定すれば1〜3dppxいずれでもimg.jpgで表示されるのです
なのでsrcsetの記述が妥当でない故にそのように挙動しているようではないのです

[maisumakun]

なにはともあれ、ドキュメントに書かれていないことは「環境やバージョンが変われば、どんなふうに変化しても文句は言えない」世界なので、それでしか実現できないことを除けば、掘り下げる労力をかけたところで、実用的には大した見返りはありません。

[maisumakun]

> なのでsrcsetの記述が妥当でない故にそのように挙動しているようではないのです

妥当な書き方でも同じ現象が発生するのでしたら、それはまた別の質問にしたほうがいいかと思います。