【レスポンシブ】PCとスマホで表示する画像を簡単に切り替える方法とは？pictureタグについて解説

2024年8月6日2024年8月27日

misa

こんにちは、ウェブデザインパレットのmisaです。

Webサイトを制作する上で、PCとスマホで異なる画像を表示させたいケースは多くあると思います。

例えば、PCでは横長の画像、スマホでは縦長の画像を表示させたい場合がありますよね。

画像を切り替える方法は、CSSでメディアクエリを使用したり、JavaScriptを使用したりする方法もありますが、今回はいちばんシンプルで簡単な、<picture>タグを用いて、PCとスマホで表示する画像を簡単に切り替える方法について解説します。

pictureタグとは？

<picture> タグは、複数の画像ソースを指定し、ブラウザやデバイスの条件に応じて最適な画像を表示するための要素です。

<picture> タグを使うことで、画面サイズやデバイスの種類に応じて適切な画像を表示することができます。

misa

<picture>タグはHTML5 で導入されました。

pictureタグの使い方

<picture> タグの使用方法はとても簡単です。
HTMLに下記のようにコードを書きます。

HTML

<picture>
  <source srcset="画像のパス" media="ブレイクポイント指定">
  <img src="上記の条件以外の画像のパス" alt="説明文">
</picture>

source 要素のsrcset 属性で画像のパス、media 属性でその画像を使用する条件を指定します
上記の条件にあてはまらない場合はimgタグを読み込みます

source要素は0個以上、何個でも入れてOKです。
img要素は1個のみ必須で入れることが条件です。

pictureタグの使用例

PCとスマホで異なる画像を表示

HTML

<picture>
  <source srcset="sp-image.jpg" media="(max-width: 768px)"><!-- 768px以下の画面幅で表示 -->
  <img src="image.jpg" alt="説明文">  <!-- 上記の条件にあてはまらない場合表示 -->
</picture>

この場合、画面幅768px以下（主にスマホ）では、”sp-image.jpg”が表示されます。
それ以外（主にPC）では、”image.jpg”が表示されます。

misa

CSSもJavaScriptも使用せずに、簡単に画像を切り替えることができます✨

切り替え画像が複数ある場合

PC、スマホだけではなく、タブレットでも切り替えをしたい場合、画像を複数設定することもできます。
sourceタグを追加します。

HTML

<picture>
  <source srcset="sp-image.jpg" media="(max-width: 428px)"><!-- 428px以下の画面幅で表示 -->
  <source srcset="tb-image.jpg" media="(max-width: 960px)"><!-- 960px以下の画面幅で表示 -->
  <img src="image.jpg" alt="説明文">  <!-- 上記の条件にあてはまらない場合表示 -->
</picture>