WordPressで画像を差し替えても古い画像が出るとき｜URL・サイズ別画像・キャッシュの確認手順

WordPressで画像を替えたのに公開ページで古い画像が出る場合は、すぐにすべてのキャッシュを消す前に「見ているページ」「画像の参照先」「取得しているファイル」を分けて確認します。メディアへ新しい画像を追加しても、ページのリンク先が変わっていないことがあります。同じ写真でも、一覧・詳細・スマホ用・背景・SNS用で別の画像を参照している場合もあります。

この記事では、更新担当者が自分でできる確認と、制作会社へ調べてもらう内容を整理します。原因を決めつけるための一覧ではなく、どこまで新しい内容が届いているかを一段ずつ調べる手順です。既存の公開ファイルや設定を変更する前に、対象、原本、差分、影響、戻し方を確認してください。すべてのWordPressに共通する消去ボタンや、一律の解消方法はありません。

1．ページと画像のどちらが古いか、同じ版で確認する

最初に対象ページのURL、確認日時、端末、ブラウザー、ログイン状態、古く見える場所を記録します。管理画面のプレビュー、確認用サイト、一般公開ページは別の場所です。以前の確認URLや保存したページを見ていないか、ページの見出しや更新した文章も合わせて確かめます。

更新した内容と、公開している内容を並べる

手元には変更前と変更後の画像を残し、どこを見れば違いが分かるかを書きます。商品名、図中の日付、写真の対象、ロゴの色など、判別できる箇所を選びます。似た写真を替える場合は、画像全体の印象だけで判断せず、確認に使う特徴を決めてください。

ページの文章も古いなら、画像だけの問題ではない可能性があります。画像は新しいのに一覧だけ古いなら、一覧の代表画像や別の設定が候補です。原因はまだ確定せず、確認できた状態を記録します。「全部古い」「スマホだけ古い」という違いが分かれば、調べる場所を絞れます。

ブラウザーを開き直して見えるようになっても、一般の利用者へ更新が届いたと確認できるとは限りません。逆に、自分だけ古い場合に、サーバー全体の設定を変える必要があるとも限りません。一つの観察をすべての利用者へ広げず、別の条件で何が見えたかを残してください。

2．新しい画像を追加したことと、ページの参照先を替えたことを分ける

メディアライブラリに新しい画像があることは、ファイルを追加できた確認です。本文の画像、アイキャッチ、独自の写真欄、トップのスライダー、背景などが自動で同じ画像へ替わるとは限りません。表示場所に対応する編集欄を確認し、新しい素材を選んで保存したかを見ます。

WordPressのメディアライブラリは、アップロードしたファイルを管理する画面です。ファイルの情報と、ページ側がその素材を使う場所の設定は分けて確認します。サイトで独自の入力欄や追加機能を使っている場合は、標準画面だけでは参照先を把握できないこともあります。（WordPressのMedia Library screen）

画像のタイトル、説明、altを変更したことと、画像の絵柄を替えたことも別です。文章の属性を保存しても、ファイルの内容が更新されるわけではありません。代替テキストは、その掲載場所で画像が伝える内容に合わせて確認します。ファイル名を変えることだけを、本文や説明の更新と同一視しないようにします。

一覧で使う写真と、詳細の本文写真が別の欄にあるなら、対象を分けて直します。同じ写真を意図して複数箇所へ登録している場合も、どの欄が正本か、どこへ再入力が必要かを整理します。担当者が毎回迷うなら、登録画面の仕様や操作手順を見直す候補になります。

管理画面の保存が成功した後は、公開ページから確認します。プレビューでは新しい素材が見えても、一般公開のページが別の保存状態を返している可能性があります。公開側の画像を開ける場合は、画像のURLと見える内容を記録し、管理画面に選んだ素材と同じかを確認してください。

3．実際に表示されたURLと、サイズ別の候補を調べる

Webページの画像は、一つのファイルだけを使うとは限りません。画面幅や解像度に応じた候補を指定するsrcsetやsizes、別の素材へ切り替えるpictureなどがある場合があります。ページのHTMLに一つのURLが見つかったことだけで、すべての端末がそのファイルを取得しているとは判断しません。

MDNのimg要素の解説は、srcに加えてsrcsetとsizesを扱い、ブラウザーが条件に応じて画像を選ぶ仕組みを説明しています。調査時には候補の一覧と、実際に選ばれた画像を分けて確認します。端末の幅だけでなく解像度なども関係するため、PCとスマホで必ず同じ候補になるわけではありません。（MDNのimg要素）

担当者ができる確認と、技術調査を分ける

更新担当者は、公開ページから画像を別に開ける場合にURLと絵柄を記録できます。ただし、画像の上にリンクがあったり、背景画像だったりする場合は、通常のメニューだけで参照先を確認できないことがあります。その場合は無理に原因を判断せず、ページと表示場所を制作会社へ渡します。

実装担当は、ブラウザーの開発ツールで、画像要素の候補、実際に選ばれたcurrentSrc、ネットワークで取得したURLと応答を確認できます。背景やJavaScriptで切り替える画像なら、その出力元も調べます。ファイル名の末尾に幅らしい数字があるからという理由だけで、作成方法や現在の設定を確定しないでください。

WordPressのwp_get_attachment_image()は、メディア情報から画像のHTMLを出力する関数です。実際のテーマがこの仕組みを使っているか、独自URLを直接出しているかで調査箇所が変わります。追加プラグインや配信先が画像の形式・URLを変えることもあるため、公開HTMLと実際の取得先を照合します。（WordPressのwp_get_attachment_image）

4．画像ファイルを直接開き、どの段階で旧版になるかを分ける

公開ページが取得した画像URLを直接開くと、ページの表示設定とファイル配信を分けて考えられます。ただし、その画像URL自体がキャッシュされる場合もあるため、直接開いたら必ず配信元の最新ファイルを見られるとは限りません。確認した条件と応答、見えた内容を一緒に残します。

ページが旧URLを参照し、そのURLで旧画像が返るなら、ページ側の参照設定が調査候補です。ページは新URLを参照しているのに新URLで旧画像が返るなら、アップロードした内容や配信側の状態を調べます。取得したファイルは新しいのに画面が違うなら、別の画像要素や重なった表示、切り替え処理なども確認します。これは原因の候補で、観察だけで断定する分類ではありません。

実装担当が必要なら、採用したファイルの容量やハッシュと、取得したファイルの内容を比べられます。ファイル名が同じでもバイトが同じとは限りません。画像の形式が配信先で変換される場合は、元画像と完全一致しないこともあるため、変換の仕様と表示内容を分けて判断します。

HTTPの200という応答は、期待した新しい絵柄の証拠ではありません。開いた内容が旧画像でも200になることがあります。URL、応答、ファイルの内容、ページの表示を別々に確認し、正しい画像が公開側へ届いたところまで点検してください。

5．キャッシュを消す前に、どこへ何が保存されているか確認する

キャッシュは、同じ内容を再利用して配信や表示の負担を減らす仕組みです。ブラウザー、ページを返すサーバー、CDN、WordPressの追加機能など、複数の場所にある場合があります。画像ファイルとページのHTMLも別に保存されるため、一つの消去ボタンですべてが同じように更新されるとは限りません。

MDNのHTTPキャッシュ解説は、利用者側のキャッシュと共有キャッシュ、保存や再検証に関わるヘッダーなどを説明しています。調査では、実際の応答とサイトの配信構成を見ます。no-cacheという名称も「一切保存しない」と同じ意味ではなく、指示の定義を確認する必要があります。（MDNのHTTP caching）

消去は対象を絞り、反映の結果まで確認する

原因となる保存先を確認できたら、対象URLや対象ページの消去、再検証、再生成など、運用に合う方法を選びます。全体のキャッシュを消すと配信負荷や他のページへ影響する場合があるため、まず必要な範囲と実施者を確認します。消去したことだけで更新完了にせず、同じ公開ページから取得し直して確かめます。

ブラウザーだけで古く見える場合には、別のブラウザーや新しい閲覧状態で確認する方法があります。ただし、シークレット表示でも共有の配信キャッシュまで使わなくなるとは限りません。違う状態で新画像が見えた結果は、切り分けの材料として記録し、すべての利用者への反映を確約する材料にはしません。

原因を調べず、URL末尾へ毎回違う値を付けたり、すべてのキャッシュを恒久的に無効化したりする方法を標準運用にしないようにします。一時的な試験で使う場合も、結果、採用しない変更、最終の公開URLを記録します。性能と内容の正しさを両方保つには、更新時にどこを処理するかを引き継ぐ必要があります。

6．同じURLへの上書きと、新しい素材への差し替えを使い分ける

同じファイルURLの内容を替える方法と、新しい素材を登録して参照先を替える方法には、それぞれ確認が必要です。同じURLなら参照している場所を保てる場合がありますが、古い内容が保存されている配信先やサイズ別画像をどう更新するかが関係します。新しいURLなら、本文、代表画像、背景、拡大先など必要な参照を更新します。

方式を選ぶ前に、使われている場所を一覧にします。外部のメールやQRコードから参照される画像、過去の資料に残したURLなどがある場合は、その影響も確認します。画像を替える依頼が、既存のファイルや掲載場所を無断で終了してよいという意味にはなりません。原本と参照一覧を残し、変更する範囲を合意します。

WordPressは設定や追加機能に応じてサイズ別の画像を扱います。元ファイルだけを外部から上書きしても、既存のサイズ別画像やメディア情報が適切に更新されるとは推定できません。再生成が必要か、どのサイズを対象とするかを担当者へ確認します。本番ファイルを削除しながら原因を探す方法は避けてください。（WordPressのメディア設定）

修正後は、通常表示、サイズ別の表示、拡大リンク、一覧、背景、SNS用の画像など、実際に変更した範囲を確認します。SNSなど外部サービスの保存・更新は自社ページと別の処理です。自社のOG画像が新しく出力されたことと、すべての外部表示が更新されたことは分けて記録します。

戻し方も方式に合わせます。新しい参照先を戻すのか、公開ファイルを保存した原本へ戻すのか、設定や生成済み画像も戻すのか。原本がなく、参照の範囲も分からない場合は、上書き前に必要な調査を進めます。見え方を直すために、別の場所の正しい画像を壊さないことが重要です。

7．PC・スマホ・一覧・拡大で、新しい内容が読めるか確認する

新しい画像が取得されても、期待した見え方とは限りません。写真の焦点が切れる、縦横比が違う、図の文字が潰れる、古い寸法が残るといった問題を確認します。PC、スマホ、レイアウトが切り替わる幅で、必要な部分が見えているかを確かめます。端末の近似表示と実機での確認は分けて記録します。

表示・内容・操作の三つを点検する

表示では、画像の比率、トリミング、余白、周囲の文章のずれを見ます。内容では、採用した版、図中の条件、写真の対象、altや説明を照合します。操作では、画像やリンクを押したときに正しい拡大先へ進めるか、閉じたり元の本文へ戻ったりできるかを試します。単に画像が読み込まれたという確認で終えないようにします。

日常の更新用チェックは、「対象ページから開く」「変更箇所を照合」「一覧と詳細を確認」「スマホで確認」「拡大やリンクを確認」「日時と未確認を残す」で作れます。毎回すべてのページを同じ深さで検査する必要はありません。共通の背景画像を替えたなら代表的な複数の画面、個別記事ならその記事と関連表示を対象にします。

画面だけで重要な条件が分からない図は、本文にも説明を残します。画像の文字を替えた際には、同じ情報を述べる本文も更新対象かを確認してください。写真だけを替えて古いキャプションが残ることもあります。素材と文章、リンクを一組として照合する方が、読み違いを見つけやすくなります。

完成記録には、確認した公開URL、画像の取得先、採用した版、端末と幅、拡大などの操作、残課題、次の担当を残します。制作会社から「キャッシュを消しました」と報告を受けた場合も、一般公開のページで意図した素材が見えるかを読み戻して判断します。

8．制作会社への依頼は、観察した状態と完成条件で伝える

原因が分からない場合でも、必要な情報は整理できます。ページURL、古く見える場所、旧新の素材、保存日時、確認環境、画像を直接開いた結果、同じ症状が出る条件を渡します。秘密情報や顧客の入力内容を共有メモへ貼る必要はありません。調査に必要なアクセスは、作業範囲に合わせて別に決めます。

架空の依頼例なら、「事例詳細の写真は新しいが、スマホの一覧では旧写真が出る。代表画像を保存した日時と新素材を添付する。候補画像と実取得URL、一覧の出力元を確認し、必要な箇所だけ修正してほしい。PC/SP・一覧・詳細・拡大で採用素材を読み戻し、戻し方も残してほしい」と書けます。最初からキャッシュを原因だと指定する必要はありません。

速度の測定や読み込み全体を見直す場合は、WordPressの表示速度改善ガイドへつなげます。本記事は更新の反映を確認するための切り分けです。点数を上げることと、新しい正しい画像が公開されたことを同じ合格条件にしないでください。

Acquaへの企業向け相談は、Web制作・更新・運用の案内で、現状調査、素材や原稿の更新、WordPress反映、公開確認など必要な範囲を確認できます。制作会社は実装・保守の案内から、テーマや独自入力、配信条件を含めた調査・修正の対応可否を相談できます。すべてのキャッシュ製品や外部配信の操作を一律に含むという意味ではありません。

支援後の解決状態は、対象の公開ページと必要な表示枠で採用した画像を確認でき、担当者が次の差し替えと確認の方法を分かることです。費用と作業範囲は環境を確認して合意し、順位や問い合わせ数の改善とは分けます。自分で確認できるところまで記録し、調査や実装が残る場合はお問い合わせへ対象URLと症状をお知らせください。