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

CSSだけで行数を指定。三点リーダーを表示する方法

2023.04.18
559
HTMLCSS プログラミング

CSSだけでhover(ホバー)したら画像を拡大させる方法【jQuery不要】

2022.01.03
1834
HTMLCSS

【画像卒業】CSSだけで平行四辺形を作る方法

2022.07.05
3736
HTMLCSS

flexboxで比率を維持したままレスポンシブに拡大縮小可能な横並びレイアウトを作ってみよう

更新日:2019.11.28
3803