画像が更新されない時の対処：絶対にキャッシュさせない！

修正されてませんよ？

絶対にキャッシュさせない！

今回はWEBデザインあるあるです。

クライアントから「この画像を修正して欲しい」と言われ、修正してFTPアップロードして一息…

自分のPCで見る分にはしっかりと修正後の画像が表示されているのにクライアントからは「前の画像のままです、どこが修正されてるのか小一時間説明して下さい。」と言われる事ってありますよね？

クライアントに「更新されない場合はスーパーリロードしてください」だとか説明するのも不親切だしこっちも面倒くさい。

そんな時の対処です。

っというかそもそも画像を修正してアップロードする時は必ずやってることですが。

画像の後ろにゴミを付ける！

例えばこんな画像を更新したとします。

<img src="sample.jpg" alt="ふにふに" />

このままではブラウザを更新しても画像が修正前のまま、という事があります。

※ブラウザのキャッシュの機能が悪さをしてるのですが、キャッシュの説明については割愛します。

これが自分のPCの場合はスーパーリロードすれば解決するのですが、スーパーリロードを知らないクライアントにそれを伝えても

「何言ってんのこいつ？スーパーリロード？中二病なの？スーパーリロード２とかスーパーリロード３とかあんの？」と思われて終了…の場合も多いです。

で、キャッシュの回避策なのですが、画像の src の後ろに半角ハテナとゴミを付けます。

<img src="sample.jpg?20151206" alt="ふにふに" />

こんな感じで、?の後には更新した日付を入れるのが一般的だと思います。

こうする事によってあら不思議、クライアントから「前の画像のままなんだけどー？」というクレームがなくなったではないですか！

？の後の文字列が以前表示した時と違えば改めて画像を読み込むって事ですね。

ですので、更に後日sample.jpgを更新する際は、また？の後の文字列を変更する必要があります。

更新するたびにhtmlも変更するのがめんどくさい人は…

？の後ろのゴミをPHPで日時を取得すればブラウザを更新するたびに更新されるようになります。

つまりこんな感じ。

<img src="sample.jpg?<?php echo date("YmdHis");?>" art="ふにふに" />

DEMO

※分かりやすいように画像の上にsrc=?日時というテキストを置いてます。

使い過ぎにはご用心！

キャッシュの機能はそもそも「閲覧者の負担軽減の為に一度見た画像は再度読み込まなくても表示できる！」という閲覧者への配慮です。

例えば…

「クライアントが画像を更新する時にキャッシュに困っている場合」等は良く更新する画像の部分のみこの指定を入れる…等の使い方はありだと思います。

「○○キャンペーン○月○日開始！」等のキャンペーン画像が頻繁に更新される場合もありだと思います。

でも、グローバルナビや見出し等そんなに更新する画像ではないなら当然キャッシュを有効に使う方がユーザーに優しいホームページですよね。

稀に更新する事があったとしても、その時だけhtmlに書きこめば事足りると思います。