Forcing browser not to use cached image

Hey all

I've been building a Photo Browser, and have been flummoxed by some major issues related to browser caching. I'm wondering if anyone knows of any methods by which I can force a browser to disregard cached images (preferably on an image-by-image basis).

Ok, I'll quickly walk you through the immediately applicable functions (if it'll help). I've got an image rotation script (in PHP, using GD2), which successfully rotates and overwrites an image (hence has the same filename, but with different content). After rotating, it displays the (supposedly-)now-rotated image. However, although Explorer/Finder confirms it has been rotated, Firefox displays the image in it's original form.

Obviously, it's displaying the cached version of the image - because it isn't physically refreshing the page, it is not replacing the image in it's cache. This error doesn't occur in Safari until I try and rotate it a second time (wierdly).

Does anyone know if there's any HTML, Javascript or PHP scripts that can force a browser to not use cached images, or force a refresh of an image in the cache? I've already tried <meta http-equiv="pragma" content="nocache" />, to no avail.

Many Thanks,

Richard

In the PHP script that serves the images, you could add something like the following:

header("Cache-Control: nocache");

header("Expires: 0");

It would be better to use a validly formatted date on the expires line, but I don't feel like looking up the HTTP specification to see what a valid date would be.

I have had this problem (with IE) on non-cached pages,

So another option, is to change the URI (just add a random number / time / whatever) this make the browser think its a new link,

ie <img src="image.jpg?rand=randomNumber">

header("Cache-Control: nocache");

header("Expires: 0");

Thanks corbin. I tried this, but it didn't seem to work. Oddly, before I tried your code, Firefox was intermittently using the new image.

I have had this problem (with IE) on non-cached pages,

 

So another option, is to change the URI (just add a random number / time / whatever) this make the browser think its a new link,

ie <img src="image.jpg?rand=randomNumber">

Thanks MT, that's a very good suggestion. I haven't tested my site in IE yet, but IE usually finds something to fail at.

Many Thanks!