Disable cache for some images

Question

I am generating some images using PHP lib.

Sometimes the browser does not load the new generated file.

How to disable cache only for images that I created dynamically?

Note. I have to use the same name for the created images over time.

Answer 1

The usual and simple solution to this problem, similar to a hack but quite portable, is to add a randomly generated query string to each request for a dynamic image.

So for example -

<img src="image.png" /> 

Would become

 <img src="image.png?dummy=8484744" /> 

or

 <img src="image.png?dummy=371662" /> 

From the point of view of the web server, the same file is available, but from the point of view of the browser, caching cannot be performed.

Random number generation can occur either on the server while serving the page (just make sure the page itself is not cached ...), or on the client (using JavaScript).

You will need to check if your web server can handle this trick.

Answer 2

Browser caching strategies can be controlled by HTTP headers. Remember that this is just a hint. Since browsers in this (and any other) area are extremely incompatible, you will need several headers to get the desired effect for a number of browsers.

 header ("Pragma-directive: no-cache"); header ("Cache-directive: no-cache"); header ("Cache-control: no-cache"); header ("Pragma: no-cache"); header ("Expires: 0"); 

Answer 3

Solution 1 is not very successful. This works, but adding random or arbitrary query strings with timestamps at the end of your image files will cause the browser to reload and cache each version of each image every time the page loads. regardless of the weather, the image has changed or not on the server.

Solution 2 is useless. Adding nocache headers to an image file is not only very difficult to implement, but also completely impractical because it requires you to predict in advance when it will be needed the first time you load any image. which you think may change in the future.

Enter Etags ...

The absolutely best way I've found to solve this problem is to use ETAGS inside the .htaccess file in the image directory. Further, Apache reports on sending a unique hash to the browser in the headers of the image file. This hash changes only when the image file is changed, and this change causes the browser to reload the image on the next request.

 <FilesMatch "\.(jpg|jpeg)$"> FileETag MTime Size </FilesMatch> 

Answer 4

If you need to do this dynamically in a browser using javascript, here is an example ...

 <img id=graph alt="" src="http://www.kitco.com/images/live/gold.gif" /> <script language="javascript" type="text/javascript"> var d = new Date(); document.getElementById("graph").src = "http://www.kitco.com/images/live/gold.gif?ver=" + d.getTime(); </script> 

Answer 5

I checked all the answers, and the best one seemed (and it’s not):

 <img src="image.png?cache=none"> 

.

However, if you add the cache = none parameter (which is a static "nothing"), this does not affect anything; the browser is still loading from the cache.

The solution to this problem:

 <img src="image.png?nocache=<?php echo time(); ?>"> 

where you basically add a unix timestamp to make the parameter dynamic and without a cache, it worked.

However, my problem was slightly different: I uploaded the generated php diagram image on the fly and controlled the $ _GET parameters page. I wanted the image to be read from the cache when the GET URL parameter remains unchanged and is not cached when the GET parameters are changed.

To solve this problem, I needed a hash of $ _GET, but since this is an array, this is the solution:

 $chart_hash = md5(implode('-', $_GET)); echo "<img src='/images/mychart.png?hash=$chart_hash'>"; 

Edit

Although the solution above works just fine, sometimes you want to serve a cached version of UNTIL, the file is modified. (with the above solution, it completely disables the cache for this image) Thus, there is a change in the use of the image file to serve the cached image from the UNTIL browser:

 echo "<img src='/images/mychart.png?hash=" . filemtime('mychart.png') . "'>"; 

filemtime () gets the file modification time.

Answer 6

I know this topic is old, but it has worked very well on Google. I found out that this works well in your header;

 <meta Http-Equiv="Cache-Control" Content="no-cache"> <meta Http-Equiv="Pragma" Content="no-cache"> <meta Http-Equiv="Expires" Content="0"> <meta Http-Equiv="Pragma-directive: no-cache"> <meta Http-Equiv="Cache-directive: no-cache"> 

Answer 7

Changing the image source is the solution. You can really do this by adding a timestamp or random number to the image.

It would be better to add a checksum, for example, the data that the image represents. This allows you to cache when possible.

Answer 8

I was just looking for a solution to this, and the answers above did not work in my case (and I don't have enough reputation to comment on them). It turns out that, at least for my brand and browser that I used (Chrome OSX), the only thing that seemed to prevent caching was:

 Cache-Control = 'no-store' 

For completeness, I now use all 3 "no-cache, no-store, must-revalidate"

So, in my case (working with dynamically generated images from Flask in Python), I had to do the following in order to hopefully work as many browsers as possible ...

 def make_uncached_response(inFile): response = make_response(inFile) response.headers['Pragma-Directive'] = 'no-cache' response.headers['Cache-Directive'] = 'no-cache' response.headers['Cache-Control'] = 'no-cache, no-store, must-revalidate' response.headers['Pragma'] = 'no-cache' response.headers['Expires'] = '0' return response 

Answer 9

I had this problem and overcame this.

 var newtags='<div class="addedimage"><h5>preview image</h5><img src="'+one+'?nocache='+Math.floor(Math.random() * 1000)+'"></div>'; 

Answer 10

I used this to solve my similar problem ... displaying an image counter (from an external provider). It was not always updated correctly. And after adding a random parameter everything works fine :)

I have added a date string to ensure an update at least every minute.

sample code (PHP):

 $output .= "<img src=\"http://xy.somecounter.com/?id=1234567890&".date(ymdHi)."\" alt=\"somecounter.com\" style=\"border:none;\">"; 

The result is a src link, for example:

 http://xy.somecounter.com/?id=1234567890&1207241014 

Answer 11

If you have a URL with a hard code, for example: http://example.com/image.jpg , you can use php to add captions to your image.

First you will need to make apache to handle your jpg as php. Look here: Is it possible to execute PHP with the file.php.jpg extension?

Download the image (imagecreatefromjpeg) from the file, then add the headers from the previous answers. Use the php function header to add headers.

Then output the image using the imagejpeg function.

Please note that it is very unsafe to transfer php jpg files. Also keep in mind that I have not tested this solution, so it's up to you to make it work.

Answer 12

Add another solution to the bunch.

Adding a unique line at the end is the perfect solution.

 example.jpg?646413154 

The following solution extends this method and provides both caching and fetching a new version when updating the image.

When the image is updated, filemtime will be resized .

 <?php $filename = "path/to/images/example.jpg"; $filemtime = filemtime($filename); ?> 

Now print the image:

 <img src="images/example.jpg?<?php echo $filemtime; ?>" > 

Answer 13

Simple, send one header location.

My site contains one image, and after loading the image does not change, then I add this code:

 <?php header("Location: pagelocalimage.php"); ?> 

Work for me.