Chromeのsrcsetで誤解していた。

Chromeのsrcsetで誤解していた。


開発

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

コードはこんな感じ。

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

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

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

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

ということらしいです。

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

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

今日はここまで
Chromeのsrcsetで誤解していた。

Chromeのsrcsetで誤解していた。


開発

ウィンドウサイズに応じて画像を切り替えるsrcset。 コードはこんな感じ。 <img sizes="100vw" srcset=" https://dummyimage.com/24…


関連する記事



こちらはいかが?


スクロールバーを自動非表示にしてくれるChrome拡張機能
スクロールバーを自動非表示にしてくれるChrome拡張機能

マニュアルを作成する為に、Chromeの画面をスクリーンキャプチャする際にスクロールバーが邪魔になることがあります。 で、元々はこちらのスクロールバーを完全非表示にしてくれる拡張機能を入れていました。 (追記 削除されま…

Chromeのマウスジェスチャー拡張を変更
Chromeのマウスジェスチャー拡張を変更

どうも最近、Chrome使用時にマウスカーソルが「スカ」る。 マウスの調子が悪いのか、スクロールの反応が鈍い。 と言っても、他のソフトでは特に問題も無いので、やはりこれはChrome特有の問題の様子。 Chrome本体に…

1 件のコメント

コメントを残す