レスポンシブデザインの画像<img>タグのsrcsetについて質問です

Question

サイトのレスポンシブ対応の画像についてなのですが、
画面の表示サイズによって、
画像を切り替えられるというコードを知ったのですが・・・
切り替わりません・・・

<img src="img/mainimg.jpg" 
  sizes="100vw" 
  srcset="img/subimg.jpg 320w,
        img/mainimg.jpg 1000w" 
  alt="sample">

のように書いてみたのですが、
どこか間違っているのでしょうか？

ブラウザはChromeが対応しているということで
Chromeを使っています。

ソースの表示をすれば、イメージの名前が切り替わっているはずなんですよね？

表示されない理由がわからないことと、
確認方法を教えて頂きたいです。

よろしくお願いします。

Answer 1

Mac OSXのChrome, Safariで試してみたんですが、どうやら一度大きい方の画像が読み込まれると、その後でウィンドウサイズを小さくしても小さい方の画像が読まれることはないようです。
一度ブラウザをリセットするなりシークレットブラウズを使うなりし、画面の横幅を十分に小さくした状態でURLを入力すると、小さい方の設定にしている画像が表示されましたよ。

こちらも、勉強になりました

Comments

[TChanger]

試してくださり、ありがとうございます！
私はwinでして、画面を小さくしてリロードしても特に変化を感じなかったのですが、
Crtl+F5を連打してみたら画像は切り替わりました！
キャッシュが残ってしまうのかわかりませんが、画像の名前をつけて保存で画像名を確認した所、ちゃんと切り替わっていましたのでスッキリしました！
ありがとうございました！