投稿日:

ブラウザ・IEの画像キャッシュをなんとかする

画像をアップするシステムを作ってる時にかなり邪魔なブラウザの画像のキャッシュ。

画像をアップしなおしたのにブラウザで確認すると前の画像が!!
そんな時の解決方法をまとめてみました。
テストしたのは
IE6,8
Firefox4
Chrome11
テストファイルはphpです。

更新ボタンは押さずにURLをたたいてページを再表示させます。

1.特にmetaタグ等を書かずに画像変える

 IE6,8:変化なし
 firefox4:新しい画像表示される
 chrome11:新しい画像表示される
2.下記のmetaタグ追加して画像かえる



 IE6,8:変化なし
 firefox4:新しい画像表示される
 chrome11:新しい画像表示される
3.下記のheader追加して画像かえる
header("Content-Type: text/html; charset=UTF-8");
header("Expires: Thu, 01 Dec 1994 16:00:00 GMT");
header("Last-Modified: ". gmdate("D, d M Y H:i:s"). " GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
 IE6,8:変化なし
 firefox4:新しい画像表示される
 chrome11:新しい画像表示される
4.下記の.htaccess追加して画像かえる

Header set Pragma no-cache
Header set Cache-Control no-cache

 IE6,8:変化なし
 firefox4:新しい画像表示される
 chrome11:新しい画像表示される
5.画像に引数をつけ画像をかえる

 IE6,8:新しい画像表示される
 firefox4:新しい画像表示される
 chrome11:新しい画像表示される
5番だと?の後ろを乱数や現在時間にして毎回画像のパスを変えるようにしてやればブラウザは新しい画像ファイルだと認識するのでページを読み込むたび最新の画像が表示されます。
しかし、すべての画像にこの引数をつけてしまうと全画像が毎回リクエストされるので読み込みが遅くなります。
適度にキャッシュを使って、新しい画像を表示させるには、画像アップ処理の時、DBに毎回ユニークなファイル名を振る必要があるのかなと思います。
photo.jpgではなくphoto20110519100000.jpgやphoto.jpg?20110519100000などのファイル名をDBに保存
(上記は現在時間を後ろにつけてます)