mediaqueryで最適な画像に切り替えるサンプル refs: https://speakerdeck.com/smashingmag/responsive-web-design-clever-tips-and-techniques

mediaquery-sample.css

@media all and (min-width:45em) {
    body:after {
        content: 'desktop';
        display: none;
}

mediaquery-sample.html

<a href='#'>
<img src='desktop-friendly-version.jpg' data-medium='tablet-friendly-version.jpg' data-large='desktop-friendly-version.jpg'>
</a>

mediaquery-sample.js

$(function(){
var size = window.getComputedStyle(document.body, ':after').getPropertyValue('content');

if(size == 'desktop') {
    $('img').each(function(index){
      $(this).attr(
          src: $(this).attr('data-large');
      );
    });
}
if(size == 'tablet') {
   $('img').each(function(index){
      $(this).attr(
          src: $(this).attr('data-medium');
      );
    });
}
});