レスポンシブ対応でスマホ用の画像を軽量化するため切り替えたい。
スマホとPCで画角を変更したい🏙
CSSで切り替える方法は運用更新が手間ですし、
SPAやWordPressでは、HTML側で画像を切り替えが前提です😒
IE11対応だからとスルーしてましたが、
HTML5のpictureで切り替え、IEへの対応方法を調べたのでご紹介します🙂
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