レスポンシブサイトで、画面幅に応じて出力画像を変更したい(大きさが異なる画像を読み込みたい)
最終的に知りたいこと
・下記要件を満たす内容で、画面幅に応じて出力画像を変更するにはどのような方法があるでしょうか?
要件
・「IE11」もしくは「Edge」にも対応
・画像は背景画像としてではなく「img src」で複数指定
・「PC」と「スマホ」でファイルを分けない
<検討した内容>
srcset属性
・IE未対応なので断念
メディアクエリ
・背景画像ではなく「img src」を画面幅に応じて変更する方法はあるでしょうか?
現時点の案
・window.matchMediaで条件分岐をすれば良いかなと思ったのですが、そこからどうすれば良いでしょうか?
・createElement('img')後、DOMへ追加する感じでしょうか?
・ちょっと大袈裟な気もするのですが、何か良い方法はないでしょうか?