レスポンシブで画像切替ができないです

Question

スマホ表示からPC表示になった際に、画像がスマホ版の画像(top01_sp.jpg)のまま、引き伸ばされた状態になって困っています。

スマホ閲覧時に「PCサイトを見る」ボタンでviewportを書き換えてスマホ画面でPCサイトのレイアウトを表示するようにしています。
また、画像ファイル名の後ろの「_sp.jpg」から「_pc.jpg」に変えることでスマホ閲覧時用の画像とPC版の画像とを切り替えています。

左がパソコン版、右がスマホ版の画像
![左がパソコン版、右がスマホ版]WIDTH:600

パソコン版の正しい見え方
![パソコン版の正しい見え方]WIDTH:600

スマホ版からパソコン版にしたあと
![スマホ版からパソコン版にしたあと]WIDTH:600

デフォルトのviewportなど

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/common/vendor/jquery-1.11.2.min.js"></script>
<script src="js/common/jquery.cookie.js"></script>

ウィンドウサイズの変化によって変わる画像

<a href="/"><img src="img/top01_pc.jpg" width="300" height="100" class="imgChange" alt="" /></a>

トリガーのボタン

<div class="switchViewportBtn pcNone"><a href="javascript:void(0)" id="btnPC">PCサイトを見る</a></div>

var wid = $(window).width();
var sp_windowWidth = 767;

$("head").append("<meta name='viewport' content="
	+($.cookie("switchScreen") == 1 ? 
		"'width=1024'" : 
		"'width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=1.0, maximum-scale=1.0'") +">");
	$(function() {
		$("#btnPC").click(function() {
			$.cookie("switchScreen", $(this).attr("id") == "btnPC" ? 1 : 0);
			location.reload();
			return false;
		});
	});

if( wid < sp_windowWidth ){
		$('.imgChange').each(function() {
			$(this).attr("src",$(this).attr("src").replace('_pc', '_sp'));
		});
};

猫に罪はありません。
よろしくお願いいたします。

==================================================================
追記しました。

ご回答有難うございます。
私の説明が下手で伝わりづらかったようで申し訳ございません！

まず、スマホでの正しい表示は、こうなります。
![イメージ説明]WIDTH:300
その時のHTMLは、

<a href="/"><img src="img/top01_sp.jpg" width="300" height="100" class="imgChange" alt="" /></a>

@media only screen and (max-width: 767px) {
.imgChange {
 width: 150px;
 height: auto;
}
}

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

にして、対応しています。
この段階では問題ないのですが、

<div class="switchViewportBtn pcNone"><a href="javascript:void(0)" id="btnPC">PCサイトを見る</a></div>

$("head").append("<meta name='viewport' content="
    +($.cookie("switchScreen") == 1 ? 
        "'width=1024'" : 
        "'width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=1.0, maximum-scale=1.0'") +">");
    $(function() {
        $("#btnPC").click(function() {
            $.cookie("switchScreen", $(this).attr("id") == "btnPC" ? 1 : 0);
            location.reload();
            return false;
        });
    });

を#btnPCのボタンをクリックして、PC表示にします。
そして、さっきの画像をみると、

<a href="/"><img src="img/top01_sp.jpg" width="300" height="100" class="imgChange" alt="" /></a>

@media only screen and (min-width: 767px) {
.imgChange {
 width: 300px;
 height: 100px;
}
}

※「top01_sp.jpg」は、横150px縦100px
※便宜上、上記CSSを書きました。本当は書いていません。

そのため、画像がビヨーンと引き伸ばされた状態になってしまいます。
![イメージ説明]WIDTH:600

ここで

<a href="/"><img src="img/top01_pc.jpg" width="300" height="100" class="imgChange" alt="" /></a>

にしたいのです！！

Answer 1

ですね。猫に罪はないですよね、犬の方がかわいいけど。

動作確認してないですが、

if( wid < sp_windowWidth ){
        $('.imgChange').each(function() {
            $(this).attr("src",$(this).attr("src").replace('_pc', '_sp'));
        });
};

これを、

if( ( wid < sp_windowWidth ) && ( $.cookie("switchScreen") != 1 ) ){
        $('.imgChange').each(function() {
            $(this).attr("src",$(this).attr("src").replace('_pc', '_sp'));
        });
};

にしてみるとどうなりますか？

Comments

[cotton88]

これからは御犬様と呼ばせて頂きます！ありがとうございます。

Answer 2

ちょっと詳しくないので見たまま書きます。

<a href="/"><img src="img/top01_pc.jpg" width="300" height="100" class="imgChange" alt="" /></a>

とHTMLの所にありますが、ここに画像（src="img/top01_pc.jpg"）を300,100の大きさ（width="300" height="100"）で表示するとあります。ここを最初から_spと書いても300,100なので引き延ばされます。
つまりこれが引き延ばされている原因なのでこの数値も変更する必要があります。サイズは見た目150,100位かな
数値を変更できない場合widthとheightを書かなければ画像そのままのサイズで表示される筈ですが、読み込みが少し遅くなるとの事です。

Comments

[cotton88]

ご回答ありがとうございました！何か機会がございましたらよろしくお願いいたします。