レスポンシブで画像切り替えの方法としてよく使われるのが、CSSのdisplayのblockで表示してnoneで非表示にする方法ですが、これだと画面幅にかかわらず、ページ表示時に2つの画像が読み込まれてしまいます。
display:noneはあくまで表示しないだけなので、PCでサイトを見た場合でもスマホの画像が読み込まれますし、スマホで見た時にもPCの画像が読み込まれているのです。
読み込む画像が増えると、その分サイトの速度やパフォーマンスが落ちてしまいます。
そこでオススメしたいのが「pictureタグ」です!
pictureタグを使用することで、CSSは使わずHTMLだけで画像の切り替えを実装することができます。しかも、CSSで実装した時のように、どちらの画像も読み込むということはなく、必要になった画像だけ読み込むので、パフォーマンスにも影響を与えません。
ということで今回は「PCとスマホで違う画像に切り替えるならpictureタグが最高にオススメ!」という内容の記事を書いていきます!
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にして、中にメディアクエリを指定します。
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 です。
MDN web docs
Picturefillで対応
下記サイトから「picturefill.min.js」をダウンロードし、読み込ませましょう。
http://scottjehl.github.io/picturefill/
これで対応完了です!
ポリフィルが必要なのはIEだけなのでjavascriptやPHPの分岐でIEの時だけ読み込むようにすると、なお良いでしょう!