srcsetブラウザ対応状況（2019年7月）

対応ブラウザ Edge、Chrome、Firefox、Safari 最新版に対応
IEに対応していない
Can I use... Support tables for HTML5, CSS3, etc
https://caniuse.com/#feat=srcset

HTML

<picture>
  <source srcset="/media/img/hoge_sp.png" media="(max-width: 979px)">
  <img src="/media/img/hoge.png" srcset="/media/img/hoge.png 1x,/media/img/hoge@2x.png 2x" alt="altが入ります">
</picture>

ポリフィル「picturefill.js」でIE対応

CDNで読み込むか、JavaScriptをダウンロードしてpicturefill.jsを読み込みます。

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.3/picturefill.js"></script>

HTML側で読み込み画像を指定できる srcset。
メリットが大きいので、仕様を理解して使っていきます〜。

参考URL

Picturefill
http://scottjehl.github.io/picturefill/

HTML 5.1のsrcset・sizes属性とpicture要素の使い方 - レスポンシブイメージで画像表示を最適化 - ICS MEDIA
https://ics.media/entry/13324/

レスポンシブイメージのポリフィル「Picturefill.js」でブレイクポイントによって画像を切り替える｜ Tips Note by TAM
https://www.tam-tam.co.jp/tipsnote/javascript/post13513.html