ホームページを作っていたり、Web 制作の現場ではあるあるな事を紹介します。
Web サイトを運営していれば、画像を差し替える事は度々ある事です。違う画像ファイル名でアップロードして html ファイルも書き換えるのはめんどくさいので、FFFTP などのクライアントソフトで画像を上書きぽいっちょ。そうすると時短にもなって良いのですが、たまにある問題が発生します。
「あれ、ブラウザを更新しても画像が変わらないなぁー。」
何で画像が変わらないんだろうと悪戦苦闘して調査に時間を浪費している人を見ました。
原因はキャッシュにあり
ブラウザは一度訪れたサイトの画像データ等をローカルに持っておいて、次回サイトに訪れた時に画像読み込み時間を短縮する仕組みを持っています。なので、実際にはサーバーで画像は差し替わっているのですがキャッシュがローカルに残っているので画像が変わらないという事がしばしば発生します。
しかし、単純にブラウザを更新しても画像は変わってくれない事があります。烈火のごとくF5キーを連打していれば画像が変わってくれる事もあります。
そんな苦労をしなくても良い方法があります。
キャッシュを消去する
ローカルに残ってあるキャッシュを消去すれば、改めてサーバーから画像を読みに行くので新しい画像に更新されます。
キャッシュを消去するには Google Chrome で Ctrl + Shift + Delete を押してください。
閲覧履歴データを消去する画面が表示されるので「キャッシュされた画像とファイル」にチェックを入れて、閲覧履歴データを消去するボタンを押せばOKです。
さて、これで画像が新しいものに変わる…。
残念ながら Chrome においては、何故かこれでも画像が変わってくれない場合があります。そんな時の為に更なる技があります。
ハード再読み込み（スーパーリロード）
スーパーリロードって何か大層な名前でかっこいいですが、まさしく最強の再読み込みです。
スーパーリロードをするには、更新したいページ上で右クリックをしてメニューから「要素を検証」を選択します。
そして、Chrome の左上の更新ボタンをマウスで左クリック長押しします。
するとそこからメニューが表示されて「ハード再読み込み」と「キャッシュの消去とハード再読み込み」が表示されます。これならF5を連打しなくても、一発で画像が更新してくれますよ。わざわざイライラしなくても済みます。
おわりに
キャッシュって意外と頑固なんですよね。この小技を知っていれば、時間の節約にもなりますし頭の片隅に入れておいて頂ければいつかきっと役に立つ事がある筈！