モバイル（スマホ）で、ロゴ画像を変更したい

URLの張り方がわからなかったので、参考にした記事のタイトルを書いておきます。

「ロゴ位置の変更とスマホ/PCで別々のロゴにする方法」

まずアドレスの張り方ですが、これはwordpressと同じ操作でできます。
何かしら文字なりアドレスをコピペして、それをマウスで範囲選択後、linkボタンでアドレスを入れて、できたら別窓で開くようにチェックボタンを入れておきます。

これを踏まえて、質問ですが、「モバイル用のロゴ画像」は、PC用のものとどのような違いがありますか？
例えばファイル容量の違いとか、ロゴ自体が違うとかそういう違いは何かあるのかなと思った次第です。

もしロゴ画像自体がPC用と同じであれば、サイズだけをスマホで合うようにすればよいだけなので特別難しい事はしなくてもイケると思うんですけれども、まずはどんな画像をどのようにしたいのかの希望みたいなものも書いてもらえる方が良いだろうと思います。

Hidekichiさま、いつもありがとうございます。

PC用ロゴ画像とモバイル用ロゴ画像は別画像にしたいです。
つまり、ロゴ自体が違うということです。

PC用のロゴ画像を画面サイズに合わせて縮小することではなく、
モバイル用にデザインしたロゴ画像を適用させたいです。

ロゴ位置の変更とスマホ/PCで別々のロゴにする方法

上の記事を参考にカスタマイズしましたが、simplicityとsimplicity2の違いからか
header-logo.phpのコードが同じではなく、自分なりに試してみましたが
うまくいきませんでした。

header-logo.phpはいじらなくてもcssでいけるはずです。Simplicity1系も2系もbackground-imageで画像を読み込んでいるので、カスタマイザーでPC(全般)の設定をしておいて、メディアクエリでスマホの時に画像アドレスを変えればよいわけです。

@media screen and (max-width: 30em) {
  #header-in {
    background-image: url(画像のパス);
  }
}

例えばこんな感じにすると、スマホの時に、#header-inの背景画像のアドレスが「画像のパス」になります。それ以外はカスタマイザーでPC(全般)の設定で指定した画像が表示されるかと思います。画像のアドレスを変えるだけなので、その他の設定は他と共通ですが、変更したいプロパティがある場合は、上記で変更すればよいかと思います。

ちなみに#header-inは記事幅です。#headerにするとブラウザの画面幅になります。これはカスタマイザーで全体表示にしているかどうかでセレクタを変えます。

さてこれらが画像を変更する基本的なことですが、質問では、画像ロゴとあるので、いわゆるヘッダ画像でないかも知れません。

サンプル: 一定のアスペクト比を保つヘッダー画像 レスポンシブ | codepen

こんな感じで、画面幅に合わせてロゴ画像をいじくることができます。上記サンプルでは同じ画像のリサイズをしていますが、これをcssで変更すればよいのではなかろうかと思います。
また、画像のアスペクト比を算出して、一定に保ちつつリサイズしているので、上記のスクリプトのままの利用の場合は画像の余白を変に作ると色々とおかしくなるかも知れませんので注意して下さい。できればPCとスマホやらの異なるロゴも同じアスペクト比で作るようにして下さい。

Hidekichiさま。
おかげさまで、ロゴ画像変更することができ、大変うれしく思っております。
教えていただき、感謝しております。
本当にありがとうございました。