メディアクエリを使用して画像のダウンロードを制御する

コンテナを作成し、メディアクエリに基づいて背景画像を設定する場合、ブラウザ（Firefox、Chrome）は、大きなサイズの画像をダウンロードした？それはポイント（すなわち帯域幅を節約すること）に全く反対しているようです。メディアクエリを使用して画像のダウンロードを制御する

HTML

<div id="background"></div>

CSS

#background { 
    width: 100%; 
    height: 400px; 
    background-image: url(/content/images/2016/04/airport-small.jpg); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center; 
} 

@media (min-width: 500px) { 
    #background { 
    background: url(/content/images/2016/04/airport-medium.jpg); 
    } 
} 
@media (min-width: 800px) { 
    #background { 
    background: url(/content/images/2016/04/airport-large.jpg); 
    } 
}

私はページをロードした場合、ブラウザはこの設定で、-large.jpgをダウンロードします。画面のサイズを800px以下に変更すると、ブラウザは-medium.jpgなどをダウンロードしてレンダリングします。

どうすればこの問題を防ぐことができますか？

出典

2016-04-29 Drunken Master

ここでの競合の主な原因は、メディアクエリが帯域幅を節約するために実装されていることです。それらは異なるサイズで異なるものを表示するために実装されました。同じイメージを異なるサイズで表示することを選択したという事実は、単にそれらを利用することを決めた方法であり、メディアクエリは、彼らが一生懸命やっていることを約束しているだけです。。

これは本当に時間とコードの価値がある投資かどうかを評価することをお勧めします（ほとんどのユーザーはウィンドウのサイズを変更したりモバイルデバイスをローテーションしたり、フラッシュアンドリロードによって）。あなたがそれをすることを決めた場合、それはCSSだけではありません。 bodyタグにclass='loaded-large'がないときに読み込むように、小さな画像のCSSルールを書き込むなど、loaded-largeをbodyタグonloadに追加するなど、JavaScriptメソッドを調べるのが最善の方法です。

これが役に立ちます。

出典

2016-04-29 18:17:21

複数のメディアクエリが実行されているため、複数の画像がダウンロードされているため、ウィンドウのサイズを変更しています。

あなたはテスト目的でブラウザのサイズを変更するウェブ開発者です。実際のユーザーは通常これを実行しません。ユーザーは単にあなたのサイトに自分のビジネスを行うために土地を取得します。– の画面サイズはです。

このユーザーがブラウザの幅が500px - 799pxのデバイスにある場合、ブラウザに応じて中程度のjpgまたは小さいjpgを取得します（下記参照）。

画面幅が800pxを超えるユーザーは、3つの画像すべてを取得できることに注意してください。（min-width: 800pxに一致するウィンドウもmin-width: 500pxと一致します）

Media Query & Asset Downloading Resultsのレビューに基づき、ブラウザーの動作はイメージのダウンロードによって異なります。特に、テスト＃4を参照してください。

また、画像は、特定の画面サイズに最適なブラウザに指示picture要素を考慮する。

4.8.2 The picture element

picture要素がベースと、著者が宣言制御またはどの画像リソースに関する使用するユーザーエージェントにヒントを与えることができるように、その含有img要素へ複数のソースを提供する容器であります画面のピクセル密度、ビューポートサイズ、画像形式、などの要因によって異なります。

<picture> 
    <source srcset="airport-small.jpg" media="(max-width: 499px)"> 
    <source srcset="airport-medium.jpg" media="(min-width: 500px) and (max-width: 799px)"> 
    <source srcset="airport-large.jpg" media="(min-width: 800px)"> 
    <img src="airport-small.jpg" alt=""> 
</picture>

すべてsourceの要素がfalseと評価された場合、img要素が適用されます。これは、pictureがInternet Explorerでサポートされていないため、便利な代替手段です。

参考文献：

Media Queries Specification〜W3C
Media Query & Asset Downloading Results〜ティムKADLEC
4.8.2 The picture element〜W3C
picture definition〜MDN
picture browser support〜caniuse.com
Polyfill for the picture element〜Picturefill

出典

2016-04-29 18:09:32

メディアクエリを使用して画像のダウンロードを制御する

答えて

関連する問題