画面サイズに基づいて画像を非表示にし、ダウンロードを防止しますか？

Question

小さな画面では特定の画像を表示し、大きな画面では別の画像を表示しようとしています。

これはメディアクエリで実現できますが、ディスプレイがnoneに設定されていても両方の画像のダウンロードが心配です。

私はsrcsetを認識していますが、IEではサポートされていないと懸念しています。

私はまた、検索に時間を費やしましたが、件名の投稿はすべて4歳のようです。

複数の画像を扱い、隠れたものをダウンロードすることなく、さまざまな画面サイズで表示/非表示する現代的な方法は何ですか？

Answer 1

あなたはIEをサポートするために、ポリフィルを使用することができます：あなたはdiv要素の背景画像としてTEの画像を定義することができ https://github.com/aFarkas/respimage

Answer 2

。

.my_div1 { 
    display: none; 
    background-image: none; 
} 
@media screen and (min-width: 768px) { 
    .my_div1 { 
    display: block; 
    background-image: url(image1.png); 
    } 
} 

のように、モバイル優先のアプローチでメディアクエリを使用すると、画面が> = 768pxの場合のみ画像が読み込まれます。