Ne pas charger certain images

Bonjour à tous,

Voilà je developpe un theme responsive.

Dans ce thèmes j'ai dans la version grand format un colonne à droite avec un gallerie d'image, qui est en display:none pour les petit format d'ecran.

Le soucis est que le display none, ne change rien en terme de performance et au chargement des ressources
J'ai pensé au lazyload, mais idem ca ne change rien au chargement en display none, juste des retardes.

Auriez vous une idée un solution?
Afin de faire en sorte que certain ressource image non essentiel ne soit pas charger sous les petite résolution?
Je sais qu'il y a quelque chose de possible JS mais je n'arrive pas à trouver d'exemple tuto.

Merci

j'ai pensé à cela:

 <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="http://192.168.1.104/test/image_big.jpg" />

        <script>
            if(screen.width>640) {
               var img_list = document.getElementsByTagName('img');
               var i = 0;
               while (element = img_list[i++]) {
                  if (element.getAttribute("data-src")) {
                  var url = element.src;
                  element.src = element.getAttribute("data-src");

                  }
               }
            }    
        </script> 

Un petit coup d'oeil ici
https://github.com/scottjehl/picturefill