How are images cached when loaded via php script

Question

I have a php script acting as a random image generator. The script queries the database for the user's images, and returns the path to one, at random. Here is the portion of the code responsible for returning the image, once the path has been chosen.

header('Content-Transfer-Encoding: binary');
header('Content-Type: image/jpeg');
header('Content-Length: ' . filesize($path));
echo file_get_contents($path);

I am calling it from the client like so

image.src = "/database/getRandomImage.php";

Every time I refresh the page I get a new image at random. However, if I call getRandomImage.php multiple times for side by side images, they will all be the same image. If I add a random property to the call like so

image.src = "/database/getRandomImage.php?path=" + Math.random() * 100;

The pictures become random. I take this to mean that the browser is caching them based on the random property I passed. The problem is this property has nothing to do with the actual image. Two different images might get cached as the same image, and the same image might not be retrieved from the cache. Is there any way for getRandomImage.php to inform the browser about the picture it is sending back?

Answer 1

The caching has nothing to do with the PHP script; it happens at the browser.

Try adding this to the script, to try and force the browser to not cache it (from PHP website):

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

Just make randomImage.php redirect to a seeded version if it isn't present.

if (!isset($_REQUEST['seed']))
{
      header("Location: randomImage.php?seed="+rand());
      exit;
}

Feel free to make the randomizer more random.

Answer 3

Why not have getRandomImage be a PHP function, which returns a path to the image. You can render the page out with the random image paths already filled in.

<img src="<? echo getRandomImage() ?>">

Then you can actually serve your images with real cache headers, and your bandwidth wont be getting hammered so hard.

Do this on the server side while the page is rendering, not after. Doing it after is more work and, as you are finding out, is more complicated too.

Answer 4

Browsers expect that the same will always represent the same image. And I think that even headers that force no caching at all wont even stop the browser from reusing the image on the same page. So a image source that is different each time you call it is pretty counter intuitive.

Cache busting is probably your best bet. That means like you random hack there, although there is ways to do it better. For instance, appending an increasing integer to the current time. This way you never duplicate urls.

var count = 0;
var now = new Date().getTime();
imgs[0].src = "/database/getRandomImage.php?" + (count++) + now;
imgs[1].src = "/database/getRandomImage.php?" + (count++) + now;
imgs[2].src = "/database/getRandomImage.php?" + (count++) + now;

But really, you may want to rethink your strategy here, because it sounds a little fishy.