PCとスマホで表示させる画像を切り替える

ウェブサイト制作で当たり前となっているレスポンシブwebデザイン。
ユーザーの環境によって最適化されて見やすいウェブページを目指しているが、そもそもPCの画面とスマホの画面は縦横比が全く異なる。
同じ画像を配置しようとしても絶妙な縦横比の正解は分からない…。
ということで、PCとスマホで別の画像を表示させれば思い通りのレイアウトが実現できるのです。

もっともシンプルdisplay:noneを使う

簡単なのはPC用とスマホ用の画像の両方を配置して、CSSのメディアクエリで片方を非表示にさせる方法。
PCで見れば、表示されるのはPC用の画像だけで、スマホ用は非表示。
スマホで見るとその逆になる。

【HTML】

<img src="main_pc.jpg" class="image-for-pc">
<img src="main_sp.jpg" class="image-for-sp">

【CSS】

@media screen and (min-width: 751px) {
.image-for-sp{display:none}
}

@media screen and (max-width : 750px) {
.image-for-pc{display:none}
}

上記のように設定すれば、PCで見た時にmain_pc.jpgだけが表示されて、スマホで見た時にはmain_sp.jpgだけが表示されるようになる。

でも重くなる…

この方法でも確かに意図することはできるが、２つ画像を配置しているため、非表示でも結果的には２つ画像を読み込んでしまうのでサイトが重くなる。
サイト全体で１、２箇所とかなら問題ないかもしれないが、複数使ったり、メイン画像などサイズの大きな場合はなかなかの弱点になってしまう。

Javascriptで画像はひとつだけ配置

CSSのdisplay:noneの弱点を克服するにはJavascriptを使おう。
PC用とスマホ用の２種類の画像を用意するのは同じだが、実際に配置するのはPC用のみ。
スマホでアクセスした際にスマホ用が表示されるようにする。

【HTML】

<img src="" class="imgChange" data-img="main_pc.jpg" alt="">

【java】

<script type='text/javascript'>
$(function(){
	var wid = $(window).width();

	if( wid < 767 ){
		$('.imgChange').each(function(){
			$(this).attr("src",$(this).data("img").replace('_pc', '_sp'));
		});
	}else {
		$('.imgChange').each(function(){
			$(this).attr("src",$(this).data("img"));
		});
	}
});
</script>

PC用のmain_pc.jpgとスマホ用のmain_sp.jpgといいたようにファイル名は共通で語尾だけ、「_pc」と「_sp」をつければ、それぞれデバイス幅に合わせた画像を表示させてくれるのです。