Written by Kasumi

画像を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 プログラミング

【簡単】checkbox(チェックボックス)のデザインをカスタマイズする方法【CSS】

2022.02.20
3467
HTMLCSS プログラミング

【簡単】htmlでpdfファイルを表示・ダウンロードする方法【表示されない場合の解決方法も伝授】

2022.03.23
2789
HTMLCSS プログラミング

【簡単】iphone(ios)でinputタグをタップしたらズームされるのを回避する方法

2022.02.12
2226
HTMLCSS

CSSだけで自動横スクロールするアニメーションを実装する方法

2022.07.15
574