[解決済み] display:none」を指定すると、画像が読み込まれないのですか？

質問

レスポンシブWebサイト開発のチュートリアルでは、どのサイトでも display:none CSS プロパティは、モバイルブラウザでのコンテンツの読み込みを非表示にして、ウェブサイトの読み込みを高速化するためのものです。それは本当ですか？また display:none は画像を読み込まないのですか、それともモバイルブラウザでもコンテンツを読み込むのですか？モバイルブラウザで不要なコンテンツを読み込まないようにする方法はないでしょうか？

解決方法を教えてください。

ブラウザは賢くなってきています。今日、あなたのブラウザは（バージョンにもよりますが）、それが有用でないと判断した場合、画像の読み込みをスキップすることがあります。

この画像には display:none のスタイルで表示されますが、そのサイズはスクリプトによって読み取られる可能性があります。 Chrome v68.0 では、親が非表示の場合、画像を読み込まない。

そこで確認することができます。 http://jsfiddle.net/tnk3j08s/

また、ブラウザの開発者ツールの"network"タブを見れば確認できたはずです。

なお、ブラウザのCPUが小さいコンピュータであれば、画像のレンダリング（とページのレイアウト）をしなくても、全体のレンダリング動作は速くなりますが、これは今日本当に意味のあることなのかどうか疑問です。

画像を読み込まないようにするには、単にドキュメントに IMG 要素を追加しない（または IMG の src 属性に "data:" または "about:blank" ).