レスポンシブデザインでPCとスマホで画像を切替える方法

レスポンシブデザインでwebサイトを制作することが多くなってきていますが、
その中でスマホの場合を考えられてないケースが多々あります。

本来であればレスポンシブの構造上、スマホファーストで考えるべきところなのですが、
PC先行でデザインし、後でスマホをどうにかするってパターンになってしまっています。。。

そういった場合、
レスポンシブデザインはもちろん同じ一つのソースなので、
同じ画像ではダメなことがあります。

しっかりスマホファーストで考えていても、
PCは横長でスマホは縦長なので、
サイズを違うものにしたい場合もあると思います。

そんな時、PCとスマホで画像を切り替える必要があります。

元々htmlに両方書いておいて、
cssでdisplayをnoneやblockにするというあまり良くない方法もありますが、
今回はjQueryを使用した方法をご紹介します。

jQueryを使ってレスポンシブデザインでPCとスマホで画像を切替える方法
どういうものかというと、特に難しいことではなく、
windowのサイズを測って、設定したい数値以下であれば、
imgのパスを変えるというものです。

一応デモもあります。（大したデモじゃないです・・・）

DEMO

jQueryを読み込んで、
以下のソースを直書きか、別ファイルに記述して読み込ませます。

javascript

JavaScript

$(function(){ var wid = $(window).width(); if( wid < 480 ){ $('.imgChange').each(function(){ $(this).attr("src",$(this).attr("src").replace('_pc', '_sp')); }); } });

1
2
3
4
5
6
7
8

$(function(){
var wid = $(window).width();
if( wid < 480 ){
$('.imgChange').each(function(){
$(this).attr("src",$(this).attr("src").replace('_pc', '_sp'));
});
}
});

あとは以下のように変更させたいimgにclass「imgChange」を付けます。

html

XHTML

<ul> <li><img src="img01_pc.jpg" alt="" class="imgChange"></li> <li><img src="img02_pc.jpg" alt="" class="imgChange"></li> <li><img src="img03_pc.jpg" alt="" class="imgChange"></li> <li><img src="img04_pc.jpg" alt="" class="imgChange"></li> </ul>

1
2
3
4
5
6

<ul>
        <li><img src="img01_pc.jpg" alt="" class="imgChange"></li>
        <li><img src="img02_pc.jpg" alt="" class="imgChange"></li>
        <li><img src="img03_pc.jpg" alt="" class="imgChange"></li>
        <li><img src="img04_pc.jpg" alt="" class="imgChange"></li>
    </ul>

これだけで、「imgChange」とつけたものは、一括で変更されます。

一つ一つ変更したい場合は、eachを使わずに記述すればいいんですが、
画像切り替えたいものを一つ一つ書くのはめんどくさいので、
classをつけるだけで、変更される方が簡単ですよね。

ただ、これはスマホの場合、
PCとスマホの画像を読み込むので、ちょっとロードのパフォーマンスが落ちちゃう可能性があります。

WRITER

スターフィールド編集部