Prevent caching of images

[Sub_Seven]

Hello,

I have a little problem, I could use some help.

I am creating a little app to manage images with the help of php.

This is the workflow:

1 - The form posts to the same page, uploads the image just fine.
2 - Once the image is uploaded it gets a "delete" link to well, delete it, it sends a parameter to the url (in the same page) and then I get the parameter with $_GET and it deletes the image just fine.
3 - When I attempt to upload another image that has the same extension as the one I just deleted it works fine as well but this is the problem:

I need to assign an exact name to the image all the time so when I delete one image and upload a new one it will get the same exact name as the one I've just deleted, so when the new image comes the browser remembers the previous image and it displays the old one, of course if I refresh I can see the new one but that's not the idea.

I thought I could fix this with these tags I found online

<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />

But they're not really preventing the issue.

Any one knows how to prevent this from happening?

Thanks everyone.

[lucy24]

Didn't I just see this identical question somewhere else?

Oops, no, sorry, I'm conflating two threads: One of them described a closely analogous problem with CSS. That one had a simple alternative fix. The other one was me blathering about mod_expires, and I think that's what you need. Assuming for the sake of discussion that you're in Apache, because I don't speak IIS.

Your wording is a little confusing but I think what you're saying is:

Because of the way your program works, each new image gets the same name as a deleted previous image. You need the browser to reload the image, even though it "thinks" it's already got it.

Can you make an htaccess file? Do you have control over where the newly created images live? Optimally you'd put these special images in a directory all to themselves. Then you toss in a teeny little htaccess file that says simply

ExpiresActive On
ExpiresByType image/png "access"

... or image/jpg or whatever it may be. The word "access" means "right now". Result: the image doesn't get cached. Browser has to reload it each time.

[topr8]

the reason the meta tags don't work is that they apply to the document, not the images that are called by the document.

[matrix_jan]

Try using this in your .htaccess file:

<FilesMatch "\.(ico|pdf|js|css|gif|png|jpg|jpeg|ico|txt|html|htm)$">
Header set Cache-Control "max-age=x, public"
</FilesMatch>

Put something instead of x, say 0...

[Dijkgraaf]

And if you can't control the headers by the means above, you could just fool the browser by changing the URL to the image slightly to force the browser to fetch it.
e.g. /ImageName.jpg?version=2
ImageName.jpg remains the same, just change the version number.

[matrix_jan]

I just noticed a website is doing what you describe. They have an image gallery. All the images are set to be cached. But when they update the gallery, old images go back and new ones come on their place, having the same name. But somehow they tell the browser and google that the new ones are not cached old ones but are completely different. How can they possibly do this? I have no Idea, but it's possible.

Are they setting new caching limits for the new images in .htaccess? hmm...

[lucy24]

Is there rewriting involved? If you're visiting the site as a user, there's probably no way to know. But cache headers, at least the ones involving mod_expires, apply to the "real" file, not to the requested name. (I learned this from direct personal experience. It's confusing.)

[tedster]

But somehow they tell the browser and google that the new ones are not cached old ones but are completely different.

Most browsers will ask the server to see if the file has changed before displaying their cached version.

[matrix_jan]

Ok after some reasearch I came up with this. If etag is not set browser will go with the cache date period to see if it needs a refresh(I'm talking about Cache-Control and Expires). Try disabling caching and set etag instead. Firebug will tell you to set cache in order to get higher score but don't listen, try it yourself and see that browser caches based on etag (actually it reads the tag and decides whether to refresh or serve from the cache. Returns 304 or 200). I just tried this on my websites and it works great. After changing a picture I see the change immediately after visiting the page, no need for refresh... Hope this helps