以下のように記述すると「ブラウザ幅」と「ディスプレイ解像度」によってレスポンシブに画像を入れ替わります
<picture>
<source srcset="img/600.png 1x , img/600@2x.png 2x" media="(min-width: 600px)" />
<source srcset="img/500.png 1x , img/500@2x.png 2x" media="(min-width: 500px)" />
<source srcset="img/400.png 1x , img/400@2x.png 2x" media="(min-width: 400px)" />
<source srcset="img/300.png 1x , img/300@2x.png 2x" media="(min-width: 300px)" />
<img src="img/default.png" alt="image with artdirection" />
</picture>
ポイントとしては大きい解像度の画像から指定することです。 小さい画像から指定するとうまく表示されません。
https://pgmemo.tokyo/livedemo/html5_source_srcset/test_img_source_srcset.html
picturefill を使用します。こちらを読み込ませるだけでOK。
<script src="//cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.2/picturefill.min.js"></script>
https://pgmemo.tokyo/livedemo/html5_source_srcset/test_img_source_srcset_IE11.html