画像をPCとスマホで切り替える方法【結論:picture要素を使おう】

画像をPCとスマホで切り替えたい。
CSSで切り替えていたが、htmlだけで簡潔できる方法を知りたい。
本記事ではこのような悩みを解決。
実装方法について解説します。
picture要素を使おう(実装サンプル)
<picture>
<!-- スマホで表示する画像 -->
<source media="(max-width: 767px)" srcset="./common/img/index/mv_sp.jpg">
<!-- PCで表示する画像 -->
<img src="./common/img/index/mv.jpg" alt="画像">
</picture>
上記サンプルコードです。
picture要素を使うと簡単にデバイス毎に画像を切り替える事ができます。
使い方はpicture要素とその子要素に1つ以上のsource要素とimg要素を使います。
img要素のsrc属性にPCで表示したい画像パスを指定。
source要素のmedia属性にスマホで適用したい最大幅(max-width)を指定。
source要素のsrcset属性にスマホで表示したい画像パスを指定。
以上の方法でPCとスマホで画像を切り替える事ができます。
タブレットも指定したい場合はsource要素を増やし、media属性の幅・画像パスを変更すればOKです。
IEが対応していない?picture要素の対応ブラウザ

piciture要素の対応ブラウザをCan I useで確認することができます。
モダンブラウザは対応してますが、IEブラウザが対応してないですね。。
IEブラウザのMicrosoftサポートは2022年6月15日で対応終了してる事からpicture要素に移行しても良いような気がします。
IEも対応されたい方はCSSで切り替える事をお勧めします。
まとめ
picture要素を使い、htmlだけでデバイス毎に画像を切り替える事でwebページの軽量化に繋がります。
以上で解説を終わります。