実際にためしたコード
下記コードを書いてみました。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img class="swapImages"
srcset="large.png 1200w,
small.png 465w"
sizes="100vw"
src="large.png "
alt="responsive image">
<picture>
<source media="(min-width:650px)" srcset="large.png">
<source media="(min-width:465px)" srcset="small.png">
<img src="large.png" alt="Flowers" style="width:auto;">
</picture>
</body>
pictureタグ内の画像はウィンドウの大きさに応じて、切り替わりましたが、imgタグはウィンドウサイズを変えても切り替わりませんし、ウィンドウを小さい状態でリロードしても切り替わりませんでした。
ネットの情報
には
どうやらChromeのポリシーとしては、
だって、一番容量の大きい画像を読み込んだ後に、わざわざ別の画像読み込む必要無いじゃん
ということらしいです。
とあります。
responsive images srcset not working
の回答にはキャッシュを消したり、リサイズしてリロードすればいい等ありますが、その回答にはやってみたけど、動かなかったというコメントもついています。
HTML 5.1のsrcset・sizes属性とpicture要素の使い方 レスポンシブイメージで画像表示を最適化
には、
注意しなければならないのは、「環境に応じた最適な画像決定」の仕組みはブラウザによって異なることです。たとえば次のような挙動があります。
Chrome : 大きなサイズの画像ファイルをキャッシュした場合、画面幅を狭めても小さい画像は読み込まれない
Firefox : 画面幅を変える度に、画面幅に適したサイズの画像を読み込む
Safari : 最初に開いた画面幅に応じた画像ファイルがキャッシュされ、画面幅を変えても画像は再読み込みされない
この手法では、単にサイズの異なる画像を場合はとくに問題ありませんが、たとえばスマートフォン向けにはトリミングをした異なる画像を出し分けたいといった場合に対応ができません。
や
picture要素を使うと、画面解像度や画面幅、画像形式等に基づいて、開発者が任意の画像を出し分けることが可能です。HTML 5.1以前からあるimg要素とsource要素を拡張して作られました
とあります。
わざわざ画面に応じた画像を用意しているのに、大きな画像があるからという理由で、小さい画像に切り替わらないのは、小さい画像を作った意味がありませんし、開発者として、何が表示されるかわからないのは不安です。pictureタグを使えば、たしかに切り替わることが確認できたのですが、imgタグでも切り替わるような記事がネットに沢山あるので、pictureもたまたま切り替わっているのではないかと不安になります。
正しい挙動はいったいなんでしょうか?
Chrome等の動きは公式がなにか発表していたりするのでしょうか?