開発

Chromeのsrcsetで誤解していた。


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

コードはこんな感じ。

<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のポリシーとしては、

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

ということらしいです。

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

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

Responsive Images with srcset and sizes

Demonstration of responsive image loading using srcset and sizes. Accompanying blog post here: https://builtvisible.com/responsive-images-for-busy-peop…


タグ: chrome レスポンシブ

コメントを残す