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

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を使うとキャッシュプラグインが動かなくなるため)、その対処方法をご紹介しました。

この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/
こんな記事も読まれています

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました