PCとスマホの画像切り替えでまだ消耗してるの?レスポンシブの画像切り替えで一番シンプルな方法

レスポンシブサイトを作る時に、スマホとPCで画像を切り替えることはよくあると思います。

よく見かけるのは、

img src="hoge_pc.jpg" class="pc"
img src="hoge_sp.jpg" class="sp"

として、

.pc{
dislplau:none;
}

@media query screen and (min-width:768px){
.pc{
dislplau:block;
}
}

CSSで切り替えるパターン。

もちろんコレでも良いんですが、あまりスマートとは言えないですよね。

そこでおすすめなのが、
srcsetを使用して、ウィンドウサイズで画像を切り替える方法」。

・コードの書き方
・ブラウザ対応状況

をお伝えします!

コードの書き方

srcsetを使った画像切り替えのコーディングはとてもシンプルです。 ざっくり説明すると、メディアクエリの指定と同じく表示するウィンドウサイズと表示する画像を指定するだけ!

f:id:daisuke-kuwabara:20181022115003p:plain

ざっくりとしたコード構造解説

コードの構造は

pictureタグの中に ・表示したい画像1
・表示したい画像2
・表示されなかった時に表示する画像
を入れるカタチになっています。

一つ一つ解説していきますね。

詳細解説

f:id:daisuke-kuwabara:20181022115435p:plain
ウィンドウサイズが767px以下の時に表示する画像です。

f:id:daisuke-kuwabara:20181022115456p:plain
ウィンドウサイズが768px以上の時に表示する画像です。

f:id:daisuke-kuwabara:20181022115515p:plain
srcsetで表示されなかった場合に表示される画像を指定します。 altはここの記述の内容が共通で使用されます。

ーーーーー
分かりやすいですよね。 設定しているメディアクエリに合わせて記述すれば良いので、迷うことは少ないと思います。 もちろんメディアクエリの指定サイズを変えれば、表示切り替えする画像を増やせますよ。



ブラウザ対応状況

2018年10月現在のブラウザ対応状況は次の通りです。 IE以外は対応しています。

IE11は2025年までサポートが続きますが、実装サイトへのアクセスが少なければ表示保証ブラウザから外してしまっても問題ないケースもありそうですよね。

f:id:daisuke-kuwabara:20181019182702p:plain

ー対応ブラウザ

Microsoft Edge
firefox
chrome
safari
opera
iOS safari
Android Browser

ー非対応ブラウザ

IE6-11

srcsetを使った画像切り替えメリット

画像切り替えにsrcsetを使うメリットはコードのシンプルさだけではありません。

dislplau:none;で切り替える方法だと、

HTMLを描画→CSSで非表示に

という手順でPC/SP用の画像を両方読み込んでいるということ。 コレだと画像読み込みをする分、ブラウザ表示速度が遅くなります。

ところが、srcsetで画像読み込む場合は

ブラウザ幅を取得 → HTMLを読み込み

と表示されるため、余計な画像を読み込むことがありません。 ページ読み込み速度は検索結果表示順位に影響しますので、SEOにも有利な書き方なんですね。

まとめ

srcsetを使った画像切り替えは、シンプルかつメリットが多い方法です。

ぜひ使ってみてください!

それでは。