image-setを使い背景画像を閲覧環境に応じて出し分けたいと思っていますが、上手くいっているように思えません。

Question

実現したいこと

お世話になります。
どなたかご説明くださいませんでしょうか？

① image-setを使い背景画像を閲覧環境に応じて出し分けたいと思っています。

② デベロッパーツールでどの画像が使用されているか確認できる方法はありますか？

前提

background-imageにimage-setを使い、画像サイズを４つ書きましたが画像がぼやけています。
デベロッパーツールをみてもどの画像サイズが表示されているのかは分かりません。

image-setの使用方法が間違っているのでしょうか？
デベロッパーツールでどの画像が使用されているのか確認できるのでしょうか？（違う画像を用意しなくでも）

私の考えではスクリーンが大きくなれば、一番大きいサイズの画像が使用されるべきと思っているのですが、この考え方が間違っているのでしょうか？

発生している問題・エラーメッセージ

エラーメッセージ（ではないのですが、デベロッパーツールでは下記のような感じで表示されています）

//打ち消し線
~~background-image: url(../img/[e-mail]);~~

//打ち消し線
~background-image: image-set(url(../img/gazou.jpg) 1x, url(../img/[e-mail]) 2x, url(../img/[e-mail]) 3x, url(../img/[e-mail]) 4x);~~

//4枚の画像
background-image: -webkit-image-set(url(../img/gazou.jpg) 1x, url(../img/[e-mail]) 2x, url(../img/[e-mail]) 3x, url(../img/[e-mail]) 4x);

該当のソースコード

background-image: url(../img/[e-mail]);

background-image: image-set(url(../img/gazou.jpg) 1x, url(../img/[e-mail]) 2x, url(../img/[e-mail]) 3x, url(../img/[e-mail]) 4x);

background-image: -webkit-image-set(url(../img/gazou.jpg) 1x, url(../img/[e-mail]) 2x, url(../img/[e-mail]) 3x, url(../img/[e-mail]) 4x);

試したこと

4枚の画像を全て違うイメージ図に差し替えて試してみました。
一番小さいものは山の写真、次に大きいものは海の写真、三番目に大きいものは川の写真という具合にすべて違う画像を使ってみました。
ですが、画面幅を変更しても一番小さい画像１が表示されるようです。

補足情報（FW/ツールのバージョンなど）

今使っているデバイス（スクリーンのみ）の情報です。
CSSピクセル：1601px × 908px
デバイスピクセル：1601px × 908px
デバイスピクセル比：1

画像の情報として
１枚目　４３１×２６７
2枚目　８６２×５３４
3枚目　１２９３×８０１
4枚目　１７２４×１０６８　←幅をいっぱいにした場合にこの画像が使用されるのではないのですか？

Macを使用していますが、スクリーンは別のものを使用しています。

Comments

[asada88]

すみません、まだよく分かっていなくてこれくらいしか試す方法が分からないのですが、他にも調査する方法はあるのでしょうか？
あるのでしたら教えていただけないでしょうか？

Answer 1

CSSピクセル：1601px × 908px
デバイスピクセル：1601px × 908px
デバイスピクセル比：1

この状況であれば 1x を指定している画像が選ばれるのが正しい動作です。ぼけて見えるのは画像が拡大されているなどの要因でしょう。
image-set に画面サイズで切り替える機能はなかったと思うので、画面サイズで切り替えたいならメディアクエリーを使う必要があるでしょう。

Comments

[asada88]

分かりました！！ありがとうございました！
image-setについて勘違いしていたようです。
大きい画像を用意して放り込んでいればスクリーン画面が大きくなったら勝手に大きい画像が使用されるものだと思っていました！
メディアクエリですね！
小さい画面（スマホなど）には1ｘと2ｘ、大きい画面(PCなど）には3ｘ、4ｘが出るようにメディアクエリで書いてみました。
きれいに表示されるようになりました。
ありがとうございました！！