モバイルデバイスで<img>を非表示にする最良の方法は何ですか？

Question

私のhtmlにはモバイルデバイスで隠したい4つのタグimgがあります。モバイルでダウンロードすることなく、最良の方法を探しています。 CSSでdisplay:noneを使用してもブラウザが画像をダウンロードできないことが判明しました。また、srcset属性をメディアクエリに基づいてシャッフルする方法を知っていますが、コンテンツに基づいてコンテンツを非表示にすることが可能かどうかはわかりませんメディアクエリ。
誰でも正しく行う方法を知っていますか？

Answer 1

もう1つの方法は、デバイスが何であるかを理解するまで、src属性に値を追加しないことです。あなたは、デバイスを特定したら、影響を受けた各画像のためsrcにデータ属性にURLを追加し、その後

<img class="desktop" data-src="http://dummyimage.com/200x200/000/fff" /> 

：

var images = document.querySelectorAll('img.desktop'); 

for (let i = 0; i < images.length; i++) { 
    images[i].src = images[i].dataset.src; 
} 

DEMO

デバイスを特定するクラスを持つ要素をロード

Answer 2

片方向は、DIVの背景画像として画像を使用し、モバイル優先アプローチを使用して大画面でメディアクエリを含む画像のみを含めることです。