PCとモバイルで画像の読み込みをCSSで切り替える方法（表示しない画像を読み込まない方法）

大きな画像を使うサイトTOPのスライダーなどをPCとスマホで分けたい場合、2つ並べて一方をdisplay:noneにする方法はよく使います。

この方法は、一見便利なのですが、display:none;で表示しない画像が実は読み込まれています。PCの画像が大きい場合はスマホで無駄に読み込まれています。その結果、Page speed insightなどでモバイルの点数がメチャクチャ落ちるので、この方法は最終的に避けないといけなくなります。

一方でwp_is_mobile()という関数があり、それを使ってPCとスマホで2つの設定項目に分かれているテーマもありますが、キャッシュプラグインと相性が良くないのでこれも使いたくない。

この記事では、display:noneやwp_is_mobileを使わずに、CSSだけでPCとスマホで画像の読み込みを切り替える方法をご紹介します。この方法を使えば、キャッシュプラグインとの相性を心配する必要もありません。

この記事で分かること

画像をbackground-imageとして読み込む
まとめ

画像をbackground-imageとして読み込む

imgタグをdisplay:noneにしても画像は読み込まれます。

親要素にdisplay:noneをつけたbackground-imageは読み込まない？

回避策として、背景画像として画像を読み込む場合は、親要素にdisplay:noneをつければ画像が読み込まれないという記事もあります。

CSSの "display: none" と画像ロード処理について - Qiita

CSSの display: none で画像を非表示にした場合に、「画像ファイルのロード処理が発生するか否か」についてブラウザ間で若干の差異があったため、下記にまとめました。<!-- <i…

しかし、実際に適用してみると画像は2つとも読み込まれているようでした。

display:noneを使わない、別の方法が必要

考えたのは、スマホ用画像を基本として、メディアクエリでPC用画像を読み込むという方法です。この方法であれば、スマホの時には、スマホ画像しか読み込まれず、PCの場合は、最悪スマホ画像も読み込まれた後に、PC用画像に切り替わるという考え方です。

CSSで画像の読み込みを切り替える

Step1
CSSで画像を切り替えるには、background-imageにする
Step2
初期状態で、スマホ画像が読み込まれるようにテーマを設定
Step3
PCの場合は、メディアクエリでbackgound-imageを上書きする

CSS例

この方法は、PC用とスマホ用の2つを置いて、どちらかを表示させるという考え方ではなく、スマホ用をPCの時だけ書き換えるという考え方です。インラインでstyleが埋め込まれていることが多いので、!importantは必要に応じて。

#fullscreen_slider_1 .slide-1{
background-image: url("https://sp1.jpg")!important;
}
#fullscreen_slider_1 .slide-2{
background-image: url("https://sp2.jpg")!important;
}
#fullscreen_slider_1 .slide-3{
background-image: url("https://sp3.jpg")!important;
}
#fullscreen_slider_1 .slide-4{
background-image: url("https://sp4.jpg")!important;
}
#fullscreen_slider_1 .slide-5{
background-image: url("https://sp5.jpg")!important;
}
#fullscreen_slider_1 .slide-6{
background-image: url("https://sp6.jpg")!important;
}
@media only screen and (min-width: 769px){
#fullscreen_slider_1 .slide-1{
background-image: url("https://big1.jpg")!important;
}
#fullscreen_slider_1 .slide-2{
background-image: url("https://big2.jpg")!important;
}
#fullscreen_slider_1 .slide-3{
background-image: url("https://big3.jpg")!important;
}
#fullscreen_slider_1 .slide-4{
background-image: url("https://big4.jpg")!important;
}
#fullscreen_slider_1 .slide-5{
background-image: url("https://big5.jpg")!important;
}
#fullscreen_slider_1 .slide-6{
background-image: url("https://big6.jpg")!important;
}
}