JavaScriptのwindow.matchMediaメソッドを利用してPC用の画像とスマホ用の画像を切り替えます。画面リサイズ時はブレークポイントでのみ処理が発生し、windowのresizeイベントを監視する必要がありません。

横幅600pxがブレイクポイントで画像が切り替わります。
htmlのコードは下記になります。切り替え対象の画像はファイル名の最後に「_pc」を付けます。
<div class="main-img"><img src="responsive_pc.jpg" alt=""></div>
JavaScriptのコードは下記になります。画像ファイル名の切り替えはjQueryを利用しています。
ページ読み込み時は関数matchFuncを一度実行して、メディアクエリに応じた画像を表示させます。documentオブジェクトで発生するDOMContentLoadedイベント(DOM構築)時の実行になります。
addEventListenerメソッドでイベントリスナー(イベントに合わせて実行させる関数)を登録します。画面リサイズ時はMediaQueryListオブジェクトのaddListenerメソッドを利用して、メディアクエリの値がtrueかfalseに変化するタイミングで関数matchFuncを実行します。
function matchFunc(){
if(window.matchMedia("(max-width:600px)").matches){
$('.main-img img').each(function(index, elm){
var item = $(elm);
item.attr('src', item.attr('src').replace('_pc', '_sp'));
})
}
if(window.matchMedia("(min-width:601px)").matches){
$('.main-img img').each(function(index, elm){
var item = $(elm);
item.attr('src', item.attr('src').replace('_sp', '_pc'));
})
}
}
//読み込み時
document.addEventListener("DOMContentLoaded", matchFunc);
//リサイズ時
window.matchMedia("(max-width:600px)").addListener(matchFunc);