Image Caching

Prevent cached imaged from displaying

[ag_47]

I'm not sure if this is possible, but basically, how can I tell a browser (through headers?) not to display any cached images on a particular page and instead download a 'fresh' copy from the server.

The problem is that when users try to replace an image they uploaded, the new image they choose takes the name of the old one on the server - but they continue seeing the original (deleted) one due to the browser just serving the cached version.

So far I see two solutions, both of which I'm not too happy with.
1. Prevent these images from being cached altogether (for everyone) - will start hogging bandwidth, technically, it's ok if images are cached for regular users
2. Give each newly uploaded image a unique name instead of replacing the original one - harder to keep track of 'current' images, will need a big change throughout the site.

Any ideas? As you can see, easiest solution is to simply prevent cached images from displaying on the user 'Control Panel'.
Thanks

[PHP_Chimp]

Why not make the page non-cacheable (if that is even a word)?
Although stopping all browsers from creating a cache is difficult you could try something along the lines of:

header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Last-Modified: '.gmdate("D, d M Y H:i:s").' GMT');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Cache-Control: post-check=0, pre-check=0', false);
header('Pragma: no-cache');

That should cover all browsers, but to be honest there are probably ones that will still cache the page.

That is an easy solution that should take very minimal additional work to install on your site.

<edit>
To combat the use of bandwidth are you compressing your pages?

You could also use the query string on the url to tell the browser that the page needs to be reloaded when the image is updated i.e.
first page load example.com/my_page.php
image updates example.com/my_page.php?image=updated
or something like that.

[edited by: PHP_Chimp at 1:47 pm (utc) on Jan. 28, 2009]

[ag_47]

hi, PHP_Chimp

Actually my page is already 'non-cacheable', i.e. I do have the no-cache headers you mentioned (not exactly same). But these only seems to affect the actual content of the page (the source). Once the browser (FireFox in my testing) comes to a tag of an image it has already loaded before, it just sticks the cached version onto the page.
The only way I could get images to be re-loaded every time is through no-cache headers in htaccess. But again, this doesn't seem very efficient since the images are reloaded too often.

In any case, I think I can just stick some random parameters on the images in the specific page I want them to get updated constantly. i.e. /images/img1.jpg?1234

[whoisgregg]

An easy "trick" to force cache refreshes is to append the last-modified timestamp to the filename... this is better than a random number because it actually reflects when the file was updated and you can still recommend aggressive caching to the browser.

So instead of

/path/to/img.jpg

you end up with

/path/to/img.jpg?1233192415