<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: 767px) {
  /* スマートフォンではPC画像を非表示にする */
  .pc_img {
    display: none;
  }
  /* スマートフォンではスマートフォン画像を表示する */
  .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);
  });
});

<picture>
  <source media="(min-width: 768px)" srcset="../pc_img.jpg">
  <img src="../sp_img.jpg" alt="商品イメージ" width="600" height="400">
</picture>