Disable cache for some images

Question

I generate some images using a PHP lib.

Sometimes the browser does not load the new generated file.

How can I disable cache just for images created dynamically by me?

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

Solution 1

A common and simple solution to this problem that feels like a hack but is fairly portable is to add a randomly generated query string to each request for the 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 accessed, but from the point of view of the browser no caching can be performed.

The random number generation can happen either on the server when serving the page (just make sure the page itself isn't cached...), or on the client (using JavaScript).

You will need to verify whether your web-server can cope with this trick.

Solution 2

Browser caching strategies can be controlled by HTTP headers. Remember that they are just a hint, really. Since browsers are terribly inconsistent in this (and any other) field, you'll need several headers to get the desired effect on a range of browsers.

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

Solution 3

Solution 1 is not great. It does work, but adding hacky random or timestamped query strings to the end of your image files will make the browser re-download and cache every version of every image, every time a page is loaded, regardless of whether or not the image has changed on the server.

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

Enter Etags...

The absolute best way I've found to solve this is to use ETAGS inside a .htaccess file in your images directory. The following tells Apache to send a unique hash to the browser in the image file headers. This hash only ever changes when the image file is modified and this change triggers the browser to reload the image the next time it is requested.

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

Solution 4

If you need to do it dynamically in the 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>

Solution 5

I checked all the answers and the best one seemed to be (which isn't):

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

at first.

However, if you add cache=none parameter (which is static "none" word), it doesn't effect anything, browser still loads from cache.

Solution to this problem was:

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

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

However, my problem was a little different: I was loading on the fly generated php chart image, and controlling the page with $_GET parameters. I wanted the image to be read from cache when the URL GET parameter stays the same, and do not cache when the GET parameters change.

To solve this problem, I needed to hash $_GET but since it is array here is the solution:

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

Edit:

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

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

filemtime() gets file modification time.

View more solutions

Comments

[dole doug]

this will applay to the whole page.... I can't disable cache for one image only(a specific image from that page)?

[lhunath]

Instead of random numbers, use the timestamp that the data changed or a version number of the reflected data.

[lhunath]

@Thorpe: It applies to HTTP responses. What is contained in the response is irrelevant. Whether it's image data, HTML data or whatever else. If it didn't work, you probably didn't do it right. Check the HTTP headers on your response to see if they have been correctly assigned.

[Philibert Perusse]

stackoverflow.com/questions/126772/…

[Pawel Krakowiak]

I wish this worked... Chrome doesn't have any problems, but Firefox 14 and IE 8 refuse to refresh the images even with the above headers being sent. This would have been so much cleaner solution than adding some arbitrary parameters to the query string. sigh

[Jos]

Please note: You do not actually prevent the browser from caching the image, you only prevent looking at the cached image. Applying proper headers to your image is the best way imho (see the solution of lhunath below). Since this way you also fill the cache unnecessarily with images you do not want to cache with the cost of causing less cache space for things you actually do want to be cached.

[Metalcoder]

I believe this article explain the reason for such behaviour.

[Ben]

this does not really works, the image needs to be flushed another way (usually on image cropping, the image remains the same)

[Torsten Barthel]

Thats no answer to the question because if at all all images will prevent caching.

[lhunath]

@HaBa-Media sorry, what? You'd obviously have to be smart about what images you want to set these headers for.

[lhunath]

@PawelKrakowiak Note that adding headers won't work for images that are already cached, since the browser doesn't even ask the server about them and therefore will never see the headers. They will work for any image requests made after you added them.

[Torsten Barthel]

@Ihunath how will I set an header just for specific images? Really have now clue how that should happen in an HTML document.

[scourge192]

Just putting no-store on the response was enough to get it working for me

[Bruce]

This solution is intended for programmers, not web designers. I thought I would point that out because one cannot just open and image and add headers to an image, unless they themselves are generating the image in a programming language and this seems to be confusing commenters.

[ZioCain]

Modern browser unfortunately are ignoring these directives, therefore this solution might work only on some browsers, also, it will disable cache for everything, not only specific images

[Gino Mempin]

It's not just on Chrome, also for Firefox. It seems to be a standard now: developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Cont‌​rol (see the "Preventing caching" section).

[gene]

That is what I used because of caching validity.

[christian]

Will this solution work with previously cached files?

[Admin]

I have a question why after a few minutes I get 414 (Request-URI Too Large)? How can I prevent the long URL from being generated?

[Chandan Y S]

?cache=none, only works in incognito mode. In the normal tab, it won't work.