• HTMLCSS

画像を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ページの軽量化に繋がります。

以上で解説を終わります。