お問い合わせはコチラから

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として読み込む

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

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

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

しかし、実際に適用してみると画像は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;
}
}

まとめ

サイトのチューニングで画像サイズが問題になるのは大抵スマホの場合ですが、テーマがPCとスマホで画像を切り替える機能を持っていないことの方が普通なので(wp_is_mobileを使うとキャッシュプラグインが動かなくなるため)、その対処方法をご紹介しました。

タイトルとURLをコピーしました