Is there a way to force browsers to refresh/download images?

Question

I have a problem where users are reporting that their images aren't being uploaded and the old ones are still there. On closer inspection the new images are there, they just have the same name as the old one. What I do on the upload is that I rename the images for SEO purposes. When they delete an image the old index becomes available and is reused. Therefore it has the same image name.

Is there a way to (i thought maybe there might be a meta tag for this) to tell the browser to not use its cahce?

The better answer is to rename the image to something totally new. I will get working on that but in the mean time is the quick solution while I work on the bigger problem.

Answer 1

append a querystring with a random number (or time, or version number, etc.):

<img src="image.png?80172489074" alt="a cool image" />

this will result in a new request, because of the different filename URL

Answer 2

you can control the cache behaviour by playing with the HTTP headers.

setting the expires header in past would force browser to not use cached version.

Expires: Sat, 26 Jul 1997 05:00:00 GMT

You can consult the RFC to have more details.

Answer 3

You can put http-equiv in <meta> tag which will tell browser not to use cache (or even better -- use it in some defined way), but it is better to configure server to send proper http cache headers. Check out article on caching.

Still, some browsers might not support all of http standard, but I believe it's the way to go.

Answer 4

If you look at the data that is exchanged between your browser and the server, you'll see that the browser will send a HTTP HEAD request for the images. The result will contain the modification time (but not the actual image data). Make sure that this time changes if the image changes on the server and the browser should download the image again.

Answer 5

It's tough. You really want images to be cached, but then you don't want to cache them once a new ones available:

• Using expires header with a date in the past prevents any caching. Bad
• Adding a "cache busting" parameter ?342038402 can fix the problem, but can also prevent the image ever from being cached, which is not what you want. Bad.
• Using expires header with a short (lets say 1 hr) expires is better... after an hour the user will see the image, but your web server won't have to serve it every time. Compromise, but what time works? Not really feasible.

The solution? I can think of two good options:

• Look into eTags, and your ability to use them. These are designed for this situation. The browser will explicitly ask your server whether the file is up-to-date or not. You can just turn this on in apache if you don't have it aleady.
• Create a new URL for each new image (and use a far-future expires header). This is what you are working on.