ヘッダーの画像をRetina対応にしたい

ヘッダーの高さを200に指定し保存して、画像ファイルの差し換え。また高さを変更。この手順でしたらどうでしょう。

はじめの大見出し部分に記載➡
https://bibabosi-rizumu.com/simplicity-customizer/

※またはfunctions.phpで高さを指定後、アップロード。画像の差し換え。また高さを戻すなど。高ささえクリアにすれば、手順はもっと少なくてもいいのかもしれませんが。

widthの変更も必要かも知れない…と思います。が試してもダメなら、わかりません。

たまたま気になった事を検索したついでに見つかった情報ですけど、HTML5でRetina対応の時に以下の属性を付けると良さそうですよ。

srcset="画像のパス/Retina未対応.jpg 1x, 画像のパス/Retina対応.jpg 2x"

負荷対策のようですが、差し替えさえうまくいかなければ、Retina対応.jpgをアップロードして2xの前にRetina対応済みの画像を入れると良いかもしれません。

こちらは実際に試せない・試してないので、参考ページをチェックしてくださいね。

参考：画像をRetina対応させるHTML5のsrcset指定の使い方｜PLUS DESIGN COMPANY

差し替えさえうまくいかなければ

誤字修正です。はじめに『差し替え・さえ・うまくいけば』と書いたけど、言葉が逆なので『うまくいかなければ』に変更した際の誤字でした。消し忘れですが、言い方が怖いのでスルーできずに訂正させていただきます。

『差し替えがうまくいかなければ』が正解です。

かうたっく様、わいひら様
ご返事遅くなりまして申し訳ございません。
ヘッダーの高さを2倍の高さに変更してから差し替えても結果は同じでいた。手順は、

1.外観→カスタム→ヘッダでヘッダの高さを600に変更
2.2140×600の画像をアップ
3.切り取り
4.現在のヘッダーに表示されえる画像の場所とファイル名確認
5.2140×600の画像のファイル名を変更しFTPでアップ
5.ヘッダーの高さを300に変更
※最初の投稿に書いてた画像サイズ間違ってました。1070×300の為に2140×600の画像を用意しました。

この方法でも最初に書きましたように画像の左上を起点に1070×300の範囲しか表示されませんでした

上記手順に何か間違いありますでしょうか。

Re:Re:503が出たため

#56976

コチラでいけると思いますがどうでしょうか。Retina非対応をカスタマイザーで設置。Retina対応は別途用意する感じです。

リンク先の補足として実装出来そうなコードを書いたつもりですが。。また明日以降、時間があるときに何らかの形で試せるなら、コチラでも試してみます。私が頑張れるようでしたら…＾＾；

かうたっく様、HTML5でRetina対応の時の属性を付けるのはどこに書きましたらよろしいのでしょうか。

あっ、それを書くのを忘れてました＾＾；
現状分かるのは、ヘッダーをロゴにしている場合だけですが。

Simplicity2: header-logo.php

//ロゴ画像の取得
    $site_title = '<a href="'.home_url('/').'"><img src="'.$logo_url.'" alt="'.get_bloginfo('name').'" class="site-title-img" /></a>';
  else://ロゴがテキストの場合（デフォルト）

おそらくですが、src="'.$logo_url.'"この部分をsrcset="画像のパス/Retina未対応.jpg 1x, 画像のパス/Retina対応.jpg 2x"こんな感じで変えてみるて様子を見る感じかもしれません。※上述のリンク先を参考にしてます。

子テーマにheader-logo.phpをアップして編集すると、万が一失敗しても、FTPソフトなどで子テーマ内のheader-logo.phpを削除すればすぐに元に戻ります。テスト環境で試すのが一番安全ですが。

※個人的な話。背景画像より、ロゴ画像を設定してCSSでヘッダーを1070pxいっぱいにした方が都合の良い作りのブログを運営しているから、現状ロゴ画像の編集方法しか確認してません。

おそらくですが、src="'.$logo_url.'"この部分をsrcset="画像のパス/Retina未対応.jpg 1x, 画像のパス/Retina対応.jpg 2x"

これ違ってましたね。さっき画像のHTMLを確認したら、src="'.$logo_url.'"+srcset="画像のパス/Retina未対応.jpg 1x, 画像のパス/Retina対応.jpg 2x"どちらも置いてる感じになってました。

<img width="535" height="400" src="＃" class="entry-large-thumnail wp-post-image" alt="" srcset="＃ 535w, ＃ 300w, ＃ 638w" sizes="(max-width: 535px) 100vw, 535px">

＃は画像のパスとします❦

私の環境ではやっぱり確認ができなかったので、普段のHTMLを確認したら上記のようになってました。とだけ。色々試して実装できると良いですね＾＾

かうたっく様、ご返事遅くなりまして申し訳ございません。
せっかく教えていただいたのですが自分には理解不能でしたのでヘッダ画像をRetina対応にするのはもう諦めることにします。
ありがとうございました。