<img src="../pc_img.jpg" alt="PC画像" class="pc_img">
<img src="../sp_img.jpg" alt="スマートフォン画像" class="sp_img">

/* PCで見た際にはpc画像を表示する */ 
.pc_img {
  display: block;
} 
/* PCで見た際にはスマートフォン画像は非表示する */ 
.sp_img {
  display: none;
}

@media screen and (max-width:736px) { 
/* スマートフォンで見た際にはpc画像は非表示する */ 
.pc_img {
    display: none;
} 
/* スマートフォンで見た際にはsp画像を表示する */ 
.sp_img {
    display: block;
}
}

<img src="../pc_img_pc.jpg" alt="PC画像" class="switch" />

$(function() {
  // 切り替える対象にclass属性。
  var $elem = $('.switch');
  // 切り替えの対象のsrc属性の末尾の文字列。
  var sp = '_sp.';
  var pc = '_pc.';
  // 画像を切り替えるウィンドウサイズ。
  var replaceWidth = 768;

  function imageSwitch() {
    // ウィンドウサイズを取得する。
    var windowWidth = parseInt($(window).width());

    // ページ内にあるすべての`.switch`に適応される。
    $elem.each(function() {
      var $this = $(this);
      // ウィンドウサイズが768px以上であれば_spを_pcに置換する。
      if(windowWidth >= replaceWidth) {
        $this.attr('src', $this.attr('src').replace(sp, pc));

      // ウィンドウサイズが768px未満であれば_pcを_spに置換する。
      } else {
        $this.attr('src', $this.attr('src').replace(pc, sp));
      }
    });
  }
  imageSwitch();

  // 動的なリサイズは操作後0.2秒経ってから処理を実行する。
  var resizeTimer;
  $(window).on('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
      imageSwitch();
    }, 200);
  });
});