Primeira coisa que deve entender é :
Caso a sua imagem não tenha valor semântico use a propriedade background-image
+ display:none
em uma div
, isso evitará que sua imagem seja carregada.
Edição
Analisando a situação percebi que a resposta que adicionei acima não é verdadeira, ou seja, pelo ao menos no caso do Google Crome
está imagem é baixada.
Veja você mesmo:
div#image {
background-image: url("https://i.pinimg.com/736x/6b/b2/49/6bb249802cf0c124fde0ccbcea699340--funny-stuff-quotes.jpg");
width:500px;
height:500px;
display:none;
}
<div id='image'>
</div>
Você pode ver isto na aba NetWork
, coloquei também uma imagem para ilustrar.

Porque é necessário que a imagem carregue?
Devido a possibilidade de um Script
verificar dinamicamente um elemento do DOM
, o navegador não otimiza elementos ou seus conteúdos.
Fonte: Does “display:none” prevent an image from loading?
display: none
.. ela é carregada em todas as medias.