【HTMLのみ】PCとスマホで違う画像に切り替えるならpictureタグを使う方法が最強！【レスポンシブ対応】

レスポンシブで画像切り替えの方法としてよく使われるのが、CSSのdisplayのblockで表示してnoneで非表示にする方法ですが、これだと画面幅にかかわらず、ページ表示時に2つの画像が読み込まれてしまいます。

display:noneはあくまで表示しないだけなので、PCでサイトを見た場合でもスマホの画像が読み込まれますし、スマホで見た時にもPCの画像が読み込まれているのです。

読み込む画像が増えると、その分サイトの速度やパフォーマンスが落ちてしまいます。

そこでオススメしたいのが「pictureタグ」です！

pictureタグを使用することで、CSSは使わずHTMLだけで画像の切り替えを実装することができます。しかも、CSSで実装した時のように、どちらの画像も読み込むということはなく、必要になった画像だけ読み込むので、パフォーマンスにも影響を与えません。

ということで今回は「PCとスマホで違う画像に切り替えるならpictureタグが最高にオススメ！」という内容の記事を書いていきます！

目次非表示

pictureタグのブラウザ対応状況
pictureタグの使い方
画面幅で画像を変更
ピクセル密度に合わせて画像を変更
画像形式で画像を変更

目次へ

pictureタグのブラウザ対応状況

Internet Explorer(IE)は2022年にサポートが終了しているため、現在はCan I Useで見てもわかる通り、主要なブラウザすべてでpictureタグが問題なく使えます。以前はIE対応のためポリフィル(Picturefill)が必要でしたが、今はその対応自体が不要です。

pictureタグの使い方

基本的な書き方は以下の通りです。

pictureタグの中に切り替える画像の<source>とデフォルト画像の<img>を入れます。

ブラウザは上のコードから見ていき、sourceの条件に当てはまれば、その画像を表示します。当てはまらなければ次のsourceへ。どれにも該当しない場合はimgを表示するという仕組みになっています。

<picture>
  <source srcset="画像URL" 属性>
  <source srcset="画像URL" 属性>
  <img src="デフォルトの画像URL" alt="****">
</picture>

画面幅で画像を変更

画面幅に応じて画像を切り替えるには、sourceの属性の箇所をmediaにして、中にメディアクエリを指定します。

MEMO

min-widthやmax-widthの数値は自由に変更できます。また、条件を増やしたいときはsourceを増やしましょう。

<picture>
  <source srcset="画像URL" media="(max-width:768px)">
  <source srcset="画像URL" media="(min-width:769px)">
  <img src="デフォルトの画像URL" alt="****">
</picture>

ピクセル密度に合わせて画像を変更

iphoneなどのピクセル密度が高いディスプレイに対応する場合に画像を2倍にしますが、それ以外の時に画像サイズが大きいものを表示すると、これまた読み込みに時間がかかってしまいますので、ピクセル密度に応じて表示する画像を変更します。

srcsetの画像URLを「,（カンマ）」で区切りながら複数入れて、各末尾にピクセル密度を表す「1x」「2x」と記載します。

<picture>
  <source srcset="/image@1x.png 1x, /image@2x.png 2x">
  <img src="/image@1x.png" alt="****">
</picture>

ピクセル密度が通常の場合は1x、2倍の場合は2xの画像が表示されます。

画像形式で画像を変更

高い画質で軽量の画像形式にWebPというものがあります。以前はSafariが対応しておらず、type属性で出し分ける代表例としてよく紹介されていましたが、SafariもWebP自体は2020年リリースのバージョン14以降で対応済みです。今のWebPだけが目的なら、実はどのブラウザでも表示できるので出し分けの必要はほとんどありません。

むしろ今出し分けの出番があるのは、WebPよりさらに軽量なAVIF形式です。AVIFはSafariの対応がバージョン16.4(2023年)からと遅かった影響で、今も一部の古いiOS/Safari環境では表示できません。こうした「まだ対応が完全に揃っていない新しい形式」を使うときこそ、pictureタグでの出し分けが活きてきます。type属性の中に画像形式を書きます。

ちなみにJPEGやPNGは全ブラウザで対応しているのでtype属性は必要ありません。

<picture>
  <source srcset="画像URL" type="image/avif">
  <source srcset="画像URL" type="image/webp">
  <img src="デフォルトの画像URL" alt="****">
</picture>

💡 以前は必要だったIE対応(ポリフィル)は今は不要

以前はIEがpictureタグに対応していなかったため、Picturefillのようなポリフィル(古いブラウザで新しい機能を使えるようにするコード)を読み込む対応が必要でした。IEのサポートは2022年に終了しているため、現在はこうした追加対応なしで、pictureタグをそのまま使って問題ありません。