outi00

皆さま、色々とご教授くださり
ありがとうございます。

色々と参考に試してみて
下記の方法で成功しました。

—————————————

固定ページ内に下記を記載

<div id="banner01">
    <img src="携帯用画像jpg" alt="" class="mobileHidden">
    <img src="PC用画像.jpg" alt="" class="desktopHidden">
</div>

css内に下記を記載

.desktopHidden { width: 100%;}
.mobileHidden { display:none;}

@media screen and (max-width:400px) {
  .desktopHidden {
  display:none;
}
  .mobileHidden {
  display:inline;
}
}

—————————————

下記ページも参考にしました。
http://sole-color-blog.com/blog/php/72/
この方法は
CSSで非表示にした場合でもブラウザは画像を読み込んでいるので
厳密には重さや速度で問題が出る
可能性があるそうで、ページ下のjQueryプラグイン「Breakpoints.js」を使う
方法がベストのようですが
今回は、そんなに大した容量でないのでこちらの方法にしました。

＞nobita様

テンプレートは無料のものは有害なタグが仕込まれたり、色々と心配があると言う事で
今回有料のものを始めて使ってみましたが安価でありますし
やはり無料のものより良かったです。
他のデザインも魅了的ですね

貴重なお時間を割いてご回答頂きありがとうございます。
また、わかりにくいところが有り申し訳ございません。

例えば

<?php if(is_mobile()): ?>
<img src="画像B.jpg">
<?php else: ?>
<img src="画像A.jpg">
<?php endif; ?>

と記述すると、PC画面で　画像B、Aが上下に同時に2つとも表示されます。
PCでは画像Aのみ、スマホになると画像B飲みに切り替わるようにしたいのですが
2つとも表示されてしまいます。