Chromeのsrcsetで誤解していた。

作成日： 2018年3月6日

ウィンドウサイズに応じて画像を切り替えるsrcset。

コードはこんな感じ。

HTML 
<img sizes="100vw" srcset="
https://dummyimage.com/240x160/000000/fff.png 200w, 
https://dummyimage.com/360x240/000000/fff.png 400w, 
https://dummyimage.com/600x400/000000/fff.png 600w, 
https://dummyimage.com/840x560/000000/fff.png 800w, 
https://dummyimage.com/1080x720/000000/fff.png 1000w, 
https://dummyimage.com/1200x800/000000/fff.png 1200w"
alt="レスポンシブ画像">

なので、例えばPC画面サイズでは横長バナー画像に、モバイル画面サイズでは正方形バナー画像に切り替えて表示出来るよね、と思っていたのだけど、これがChromeでは切り替わらない。

Chromeだとうまくいかないじゃない

どうやらChromeのポリシーとしては、

だって、一番容量の大きい画像を読み込んだ後に、わざわざ別の画像読み込む必要無いじゃん

ということらしいです。

まぁ確かにどの方が合理的だよね。

Firefoxだと出来るのだけど、もしかしたらいずれ同じ仕様になるかも。

物草 灸太郎

WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。

⬅ 前の記事
レスポンシブ対応の画像切り替えはこれで大丈夫。
次の記事 ➡
【初心者向】Visual Studio Codeでphp cs fixerを設定する方法

関連投稿

コメント

レスポンシブ対応の画像切り替えはこれで大丈夫。 – モノグサにお灸 さん
[…] Chromeのsrcsetで誤解していた。 […]
2018年3月7日 10:35 PM 返信

コメントをどうぞ

  • メールアドレスが公開されることはありません。
  • コメント欄にURLは入力できません。
  • このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシーと利用規約が適用されます。