【色々試してみよう！】PCとスマホで画像を切り替えたい時の３つの方法

2024.02.18

今回はメインビジュアルなど、PCとスマホで表示する画像を切り替えたい方法を３パターン紹介します。

方法によって、ページ読み込みの際に読み込まれる画像の数が違います。

pictureタグとJavaScriptを使う方法では、ページ読み込みの際にPCかスマホどちらか一方しか読み込まれないので、表示スピードが速くなります。

※CodePenでPC表示を見たいときには「0.5x」を選ぶと見やすいです。SP切り替えは検証ツールで行ってください。

pictureタグによる画像の出し分け

現在のメジャーな方法です。

以前はIE非対応だったためあまり浸透していなかったようですが、現在は全ての主要ブラウザで対応しています。

See the Pen 画像切り替え(picture) by ゆき | Web制作 (@yukimum22) on CodePen.

HTML

 <picture class="mv">
    <source srcset="画像パス" media="(min-width:769px)"><!--切り替え位置を調整（例）768以下なら(max-witdh:768px)-->
    <img src="画像パス" alt="">
  </picture>

sourceタグの中身によっては、WebPが反映しなければpngを表示する、といった画像の種類による出し分けも可能です。
sorceタグは上から順に優先順位が高くなります（１番目が適用されたら２番目は反映しない）。

<picture>
  <source .../><!-- 優先順位1 -->
  <source .../><!-- 優先順位2 -->
  <source ... /><!-- 優先順位3 -->
  <img ... /><!-- どれも当てはまらない場合 -->
</picture>

CSS

.mv img{
  width:100vw;
  height:auto;
}

puctureタグ自体はCSSの調整ができないので、divタグで囲うか、中身のimgタグを調整します。

JavaScriptによる画像の出し分け

レスポンシブの切り替え位置が統一されており、他の箇所も含めて一気に指定したい、というときにオススメです。

See the Pen 画像切り替え（JavaScript） by ゆき | Web制作 (@yukimum22) on CodePen.

HTML

<div class="mv">
    <img src="画像パス/aaa_sp.jpg" alt="" class="change-image">
</div>

imgタグは画像1つ分を用意します。ブレイクポイントで切り替えたい画像には、共通のクラス名を当てます。今回の場合は.change-imageを当てています。

CSS

.mv{
  width:100vw;
}
.mv img{
  width:100%;
  height:auto;
}
@media(min-width:769px){
  .mv{
  width:90vw;
}
}

CSSを調整します。

JavaScript

var changeImages = $('.change-image');
var changeImage = function () {
  changeImages.each(function (index, el) {
    var src = $(el).attr("src");

    if ($(window).width() >= 769) {
      src = src.replace(/_sp/, "_pc");
    } else {
      src = src.replace(/_pc/, "_sp");
    }
    $(el).attr("src", src);
  });
};

$(window).on({
  load: function () {
    changeImage();
  },
  resize: function () {
    changeImage();
  }
});

.change-imageのクラス名を持つ要素を集めて、画像のファイル名の末尾_pc、_spを切り替えます。

クラス名で切り替える

See the Pen 画像の切り替え（クラス名） by ゆき | Web制作 (@yukimum22) on CodePen.

HTML

<div class="mv">
  <img src="SPの画像パス" alt="" class="sp">
  <img src="PCの画像パス" alt="" class="pc">
</div>

スマホで表示したい画像にはsp、PCで表示したい画像にはpcというクラス名を付けます。

CSS

.pc{
  display:none;
}
.mv{
　width:100vw;
}
.mv img{
  width:100%;
  height:auto;
}
@media(min-width:769px){
.sp{
  display:none;
}
.pc{
  display:block ;
 }
.mv{
  width:90vw;
}
}

.pcというクラス名を持つ要素はSPで非表示に、.spというクラス名を持つ要素はPCで非表示に、というCSSを書きます。さらに、画像の大きさを調整します。

従来はこの方法で切り替えていましたが、HTMLの読み込みでスマホとPCの画像両方を読み込む必要があり、表示スピードが落ちます。
また、CSSの記述も多いため、現在はあまり推奨しません。

以上になります。