I don't know if this is the best practice, but we added an image with a snow delay for our school. For some users the image wouldn't come up. Is this a matter of the browser or something else? I had to use Ctrl + F5 to clear the cache to see the updated image.


It's definitely a caching issue. There are a few ways to correct thisThe simplest way is to append a unique value as a query string to the name of the image so it always appear to be new to the browser and it requests the image evrey time. Using a timestamp is the easiest way to do this.

<img src="/images/weatherupdate.png?19591782466" width='100" height="100" alt="Snow Delay">

You also serve that image through a PHP (or any server side language file) and send no cache headers along with that image.

<img src="/images/weatherupdate.php" width='100" height="100" alt="Snow Delay">

PHP Code:

    $image = '/path/to/image/delayedopening.png';
    header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");
    header("Cache-Control: must-revalidate, post-check=0, pre-check=0"); 
    header("Cache-Control: private",false);
    header("Content-Type: image/png"); 
    header("Content-Disposition: attachment; filename=" . basename($image));
    header("Content-Transfer-Encoding: binary"); 
    header("Content-Length: " . filesize($image)); 

You can also place the image in its own directory with other images you don't want cached and place this .htaccess file in there to prevent caching.

<FilesMatch "\.(gif|png|jpg|jpeg)$">
FileETag None
<IfModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy