How to clear browser cache when re-uploading image with same filename, in php?

Question

I have a listing of items, that also contains an image thumbnail. Sometimes I need to change the thumbnail image, but keep the filename the same. Is there a way to force the browser to download the newly uploaded image, instead of grabbing one from the browser cache?

This is very pertinent when people update their avatars, which causes confusion for some users, who keep seeing their old avatar, until they clear the browser cache, or restart the browser.

Answer 1

You can invalidate the cache for an entire page by altering the headers:

<?php
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
?>

Answer 2

When sending out the image, make sure not to send any Expires header. Also consider sending this cache header:

Cache-Control: must-revalidate

This will make the browser ask your server for the image every time. Watch for an If-Modified-Since header in the request; if the image is not modified, answer with an 304 HTTP code.

This whole procedure (must-revalidate, If-Modified-Since, 304 answer) will make it possible for the browser to cache the image content but at the same time ask your server if the file has changed.

---

Another, maybe simpler, solution is to only set an Expires header a short time in the future, for example ten minutes, and inform the user of the ten minute delay. This will speed up most page loads since there's no need to do any HTTP request for the image at all.

Answer 3

You can use the modification time of file:

<?

$filename = 'avatar.jpg';
$filemtime = filemtime($filename);

echo "<img src='".$filename."?".$filemtime."'>";

//result: <img src='avatar.jpg?1269538749'>

?>

when the file is modified will clear the client cache