画像を新しくしたはずなのに、ページを見ると前の画像のまま！？
管理画面ではちゃんと差し替わっているのに、公開ページだけ変わらない。よくある場面です。
こういう時、つい「キャッシュだろう」と全部消したくなります。でも、それで直ってしまうと、次に同じことが起きた時にまた同じ手順を繰り返すことになります。原因が分からないままなので。先に画像のURLを2つ見比べるだけで、原因はかなり絞れます！
この記事でわかること
この記事では、キャッシュを消す前に、古い画像が残っている場所を探します。
- 古い画像が表示されるときに、最初に比べたい場所
- キャッシュの問題と、ページの参照先の違いを分ける方法
- ブラウザ、WordPress、サーバーやCDNを確認する順番
- 自分で確認を続ける範囲と、変更を止めたい条件
見た目ではなく、画像のURLを比べる
最初に見るのは、画像そのものではなくURLです。同じファイル名でアップロードし直しても、WordPressは別のURLとして扱うことがあります。ここが分かれ道になります。
公開ページで古い画像を右クリックして、画像のURLを控えてください。次に、メディア画面か編集画面で、新しい画像のURLを確認します。この2つを並べると、どこで止まっているか分かります。
- URLが違う：ページ側が古い画像を参照している
- URLが同じ：ブラウザかサイト側にキャッシュが残っている
- URLの末尾だけ違う：WordPressが作った別サイズの画像が表示されている
3つ目は見落としやすいところです。WordPressは、アップロードした1枚から複数のサイズを自動で作り、画面幅に応じて表示する画像を選びます。だから、パソコンでは新しい画像なのにスマホだけ古い、という妙な状態も起こります。同じ画像に見えても、実際は別ファイルなんですね。
URLが違うなら、キャッシュではなくページ側
URLが違っていれば、キャッシュは関係ありません。ページが古い画像を指したままなので、編集画面で参照先を直します。画像ブロックなら、画像を選び直して更新するだけです。
ただ、どこを直すかは表示場所によって変わります。
- 本文内の画像：投稿や固定ページの編集画面
- アイキャッチ画像：投稿設定のアイキャッチ欄
- メインビジュアルや背景画像：テーマ設定や専用ブロック
- 共通バナー：再利用パターン、ウィジェット、テーマの設定
本文を直したのに変わらない時は、同じ画像が別の場所にも登録されていないか見てみてください。アイキャッチとテーマ設定の両方に同じ画像を入れているケースは、けっこうあります。
直したら、もう一度公開ページで画像URLを確認します。新しいURLに変わっていれば、ページ側の修正はこれで完了です。なお、画像を選び直す前に今の設定と画像URLを控えておくと、元に戻したくなった時に困りません。共通パーツかどうか判断できない場合は、その場で手を止めたほうが安全です。1か所直したつもりが、全ページに反映されることもあるので。
URLが同じなら、環境を変えて確かめる
新旧のURLが同じなら、今度は表示する側を疑います。自分のブラウザだけで判断しないのがコツです。
- ページを再読み込みする
- プライベートブラウズで同じURLを開く
- 別のブラウザ、または別の端末で開く
- Wi-Fiとモバイル回線を切り替えて比べる
自分のブラウザだけ古いなら、手元のキャッシュです。これは他の人には影響していません。逆に、どの端末で見ても古いままなら、WordPress、サーバー、CDN、画像最適化サービスなど、サイト側に原因があります。
この時、画像URLと表示結果はセットでメモしておいてください。「なんか古い」ではなく「このURLの画像が、スマホだけ古い」まで分かれば、次に何を見ればいいかが決まります。
キャッシュは、一度に全部消さない
キャッシュ機能が複数あるサイトで全部まとめて消すと、直ったとしても、どれが効いたのか分かりません。次に同じ症状が出た時、また全部消すことになります。影響の小さいところから、順番に確認していきます。
- ブラウザの表示を確認する
- WordPressのキャッシュ機能を確認する
- サーバー側のキャッシュ設定を確認する
- CDNや画像最適化サービスを確認する
ややこしいのは、キャッシュがどこにあるか見えにくいことです。キャッシュ系プラグインが入っていても、サーバーやCDNには別のキャッシュがないかもしれない。反対に、管理画面にそれらしい項目がなくても、サーバー側で動いていることがあります。
進め方はシンプルです。操作する前に対象ページと画像URL、時刻を控える。一つ操作したら、同じ条件で表示を確認する。変わらなければ次へ。これだけで、サイト全体のキャッシュを不用意に消さずに済みます。
ひとつ注意点を。「キャッシュを削除」と書いてあっても、対象がそのページだけなのか、画像を含むサイト全体なのかは機能によって違います。範囲が分からないボタンは、押す前に止めてください。アクセスの多い時間帯に全削除すると、一時的にサイトが重くなることもあります。
それでも直らないなら、画像ファイル自体を疑う
参照先もキャッシュも問題なさそう。それでも古いまま。この段階まで来たら、アップロードした画像そのものを見ます。
メディア画面で新しい画像を単体で開いて、こんなところを確認します。
- 画像の内容が意図したものか
- ファイル名やアップロード日時が合っているか
- 必要な大きさで保存されているか
- トリミング後の画像と元画像を取り違えていないか
正直、ここで見つかることもあります。似た名前のファイルを選んでいた、書き出す前の画像をアップロードしていた、といったパターンです。
WordPressの画面上で切り抜いた画像は、元画像を残したまま別ファイルとして保存されます。「自分が編集した画像」と「ページが表示している画像」が同じものかどうかは、やはりURLで判断できます。
自分で確認できる範囲と、変更を止めたい条件
画像URLの比較、編集画面での参照先確認、別ブラウザや別端末での表示確認。ここまでは設定を壊す心配がないので、安心して進められます。キャッシュ削除も、対象と範囲がはっきりしていれば一つずつ試せます。
一方、次のような状態なら、設定をいじり続けないほうが安全です。
- キャッシュ機能が複数あり、どれが使われているか分からない
- CDNや画像最適化サービスの契約・設定が分からない
- 共通パーツの画像で、変更範囲を判断できない
- 端末や画面幅によって別の画像が表示される
- キャッシュを削除しても、しばらくすると古い画像へ戻る
最後の「しばらくすると戻る」は、どこかで古い画像が生き続けているサインです。手当たり次第に消しても、また戻ってきます。
相談する時は、対象ページのURL、新旧画像のURL、古く見える端末とブラウザ、すでに試した操作。この4つがあると、原因を追いやすくなります。
おわりに
画像が古いままの時は、キャッシュを全部消す前に、公開ページと新しい画像のURLを比べてみてください。URLが違えば参照先の問題、同じなら表示環境やキャッシュの問題。ここで二手に分かれます。
何度消しても直らない、サーバーやCDNを含めた構成が分からない。そんな時は、WordPress側の設定も含めて確認できます。お困りなら、お力になれると思うのでお気軽にご相談ください。