画像を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要素の対応ブラウザ

https://caniuse.com/?search=picture

piciture要素の対応ブラウザをCan I useで確認することができます。

モダンブラウザは対応してますが、IEブラウザが対応してないですね。。

IEブラウザのMicrosoftサポートは2022年6月15日で対応終了してる事からpicture要素に移行しても良いような気がします。

IEも対応されたい方はCSSで切り替える事をお勧めします。

まとめ

picture要素を使い、htmlだけでデバイス毎に画像を切り替える事でwebページの軽量化に繋がります。

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

関連記事

HTMLCSS プログラミング

CSSのnth-childを使い、子要素の最初、最後、偶数奇数、何番目以降を指定する方法

更新日:2020.06.11
128
HTMLCSS JavaScript プログラミング

一枚画像に複数のリンクを場所指定して設置する方法【レスポンシブ対応】

更新日:2020.03.23
305
HTMLCSS プログラミング

iframe内のリンク・formを別タブで開く方法

2021.11.02
309
HTMLCSS

tableのtd・thタグ内テキストが改行されない原因と解決方法

2022.06.06
246