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

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

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

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

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

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

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

目次非表示

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

目次へ

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

Can I Use を見てみるとIEには対応しておりませんが、その他主要のブラウザには対応しております。IE対応方法は記事の最後に書きますね。

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では現時点で対応していません。（バージョン14で対応予定）

safariやieの為だけにWebPを使わないのはもったいないので、画像形式で表示させる画像を変更します。type属性の中に画像形式を書きます。

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

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

IE対応問題

本当にこの子にはいつも悩まされていますよ。。。

IEはポリフィルでサクッと対応させてしまいましょう。

ポリフィルとは、最近の機能をサポートしていない古いブラウザーで、その機能を使えるようにするためのコードです。大抵はウェブ上の JavaScript です。
ＭＤＮ web docs

Picturefillで対応

下記サイトから「picturefill.min.js」をダウンロードし、読み込ませましょう。

http://scottjehl.github.io/picturefill/

これで対応完了です！

ポリフィルが必要なのはIEだけなのでjavascriptやPHPの分岐でIEの時だけ読み込むようにすると、なお良いでしょう！