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

inputタグのラジオやチェックボックスをボタン画像にする方法

2021.01.04
1925
HTMLCSS

HTMLタグのデフォルトCSSを指定したタグだけ全て無効にする方法【allプロパティを使おう】

2023.01.12
241
HTMLCSS WordPress プログラミング

wordpressのメディアから任意の画像ファイルを素早く呼び出す方法【簡単】

2021.12.23
393
HTMLCSS プログラミング

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

2021.11.02
1528