レスポンシブデザインでのコーディングをする際、PCとSPで同じ画像にするのが理想なのですが、
やはり別の画像にしないと行けなくなるときがあります。

その際は、背景画像であれば、cssで変更できますが、
通常の画像は,javascriptで横の幅のサイズを取得してそれにより、imgを変更したりしていますが、
便利なsrcsetというタグがあるようです。
srcsetは必要のない画像はロードしないので、いいですね。

以下のような使い方になるようです。

srcsetに対応していないブラウザの場合は、srcを読み込んで、
srcsetを読み込む場合、通常の場合はsample.jpgが読み込まれ、Retinaディスプレイではsample2.jpgを読み込むようです。

また、

このように記述すると、
ウィンドウサイズが320px以下ならsample_sp.jpgが、640px以下かそれ以上ならsample2.jpgが読み込まれます。

まだ全てのブラウザで対応している訳じゃないとのことですが、
Picturefillを使えば対応出来るとのことです。

これがしっかり使えるようであれば便利ですね〜・・・
とも思いますが、PCとSPで画像が簡単に変更が出来るという点では、作業量がちょっと増えるのかなとも思います。

ここでは書いてませんが、pictureというタグも同じように使用可能なようで、
レスポンシブサイトの要望に対応したタグができているようです。。。

参考にさせていただいたサイトは以下になります。
HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう
picture要素の関連仕様って今どうなってるんだっけ？を調べたメモ ::ハブろぐ