PCとスマホで表示する画像を変える方法あれこれ

（投稿日：2018年01月21日）

レスポンシブサイトを制作する際、PCとスマホで違う画像を表示したいときってありますよね。いろいろ方法はありますが、簡単にできる方法をいくつか紹介します。

その１：メディアクエリーだけでやる方法

<img class="toggle-pc" src="pc.jpg">
<img class="toggle-sp" src="sp.jpg">

.toggle-pc { display: block; }
.toggle-sp { display: none; }
@media only screen and (max-width: 640px) {
  .toggle-pc { display: none; }
  .toggle-sp { display: block; }
}

PC用、スマホ用の両方を併記しておいて、画面サイズにあわせて一方だけを表示にします。一番簡単な方法ですが、一旦両方の画像を読み込んでいるのでちょっとスマートじゃないような。

その２：wp_is_mobile()関数を使う方法

WordPressの場合はそれ用の条件分岐タグが用意さています。

<?php if ( wp_is_mobile() ) : ?>
  <img src="sp.jpg">
<?php else: ?>
  <img src="pc.jpg">
<?php endif; ?>

ただし、デフォルトではwp_is_mobile()はタブレットをモバイル端末として扱います。タブレットにはPC用のデータを表示したい場合が多いですよね。そんなときは関数を追加して対応します。

function is_mobile() {
  $useragents = array(
    // 対象にするユーザーエージェントを記載
  );
  $pattern = '/'.implode('|', $useragents).'/i';
  return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

<?php if ( is_mobile() ) : ?>
  <img src="sp.jpg">
<?php else: ?>
  <img src="pc.jpg">
<?php endif; ?>

ユーザーエージェントのメンテナンスがめんどくさい？

その３：jQueryを使って画像を入れ替える方法

最後はjQueryを使って条件に応じて表示する画像を入れ替える方法です。

まずは、画像ファイル名前の末尾にPC用は”_pc”、スマホ用は”_sp”を追加します（画像両方同じディレクトリに保存してください）。次に、入れ替える画像にclass="toggleImg"を追記します。

<img class="toggleImg" src="smaple_pc.jpg">

最後に次のコードを追加すればOKです。

$(function () {
  var width = $(window).width();
  if( width < 640 ){
    $(".toggleImg").each(function(){
      $(this).attr("src", $(this).attr("src").replace("_pc","_sp"));
    })
  }
});