How to prevent old images from appearing on page reloads when there are updated images available

Question

I constantly have to update main images on my site, the user will go to the site but the images won't be the updated versions unless they manually hit refresh. Even by me putting "please hit refresh to view updated images" the users ignore this and I have to e-mail them to hit the refresh button. I've tried having the initial index.html reload to the actual site using Javascript like this

The initial index.html:

document.location.href='index2.php?code=reload_page'

Then on the index2.php:

$the_code = $_GET['code'];

  if($the_code == "reload_page")
    {
     $page = $_SERVER['PHP_SELF'];
     $sec = "1";
     header("Refresh: $sec; url=$page");
    }
  else
    {
      //load page regular
    }

I tried it like this, but it didn't work, still has old images until you hit the refresh button. Any other ways of accomplishing this using PHP or javascript/jquery?

Answer 1

The problem with images not refreshing might be an issue with caching in web browser or on the server proxy etc. It is configuration issue and might be not dependant on you. Easy trick to bypass this is to add timestamp to img url. Every time you regenerate your content in index.php just add some query string to your image as this:

<?php
echo '<img src="my_image.png?ts='.time().'" />';
?>

it will trick your browser and proxies on the way that it is another image and prevent caching.