CSSの display: none で画像を非表示にした場合に、「画像ファイルのロード処理が発生するか否か」についてブラウザ間で若干の差異があったため、下記にまとめました。
HTML
<!-- [1] <img>要素に対して "display: none" -->
<img src="1.jpg" style="display: none;">
<!-- [2] background-imageを指定した要素に対して "display: none" -->
<span style="background-image: url(2.jpg); display: none;"></span>
<!-- [3] <img>要素の親要素に対して "display: none" -->
<p style="display: none;"><img src="3.jpg"></p>
<!-- [4] background-imageを指定した要素の親要素に対して "display: none" -->
<p style="display: none;"><span style="background-image: url(4.jpg);"></span></p>
| [1] | [2] | [3] | [4] | |
|---|---|---|---|---|
| Chrome (74.0.3729.131) | ● | ● | ● | - |
| Firefox (66.0.4) | ● | - | ● | - |
| Safari (12.1) | ● | - | ● | - |
| Edge (42.17134.1.0) | ● | ● | ● | - |
| Internet Explorer (11.0.120) | ● | ● | ● | - |
| ●: 画像ファイルがロードされる |
主要ブラウザにおいては、
画像を background-image として指定し、その親要素を display: none にする
という条件では画像ロードが発生しないようです。