4

I have one image on my website that I don't want cached. The image is used as a background in CSS so I can not change it's name dynamically. Any ideas ?

Alex
  • 4,296
  • 4
  • 31
  • 54
  • I can set up Apache. Is there any easier way ? – Alex May 16 '11 at 09:54
  • 1
    @Alex you could create a .htaccess file with caching instructions for that one file, it's fairly easy and doesn't require touching Apache. – Pekka May 16 '11 at 09:56
  • The file is wp-content/themes/ss3/includes/sprite.jpg . Could you please help me with the rules ? – Alex May 16 '11 at 09:59
  • 2
    @Alex sorry, I'd have to look up and test the rules myself, can't do that right now. At any rate, you will need [this](http://httpd.apache.org/docs/2.0/de/mod/core.html#files) to limit the directives to one file; the rest is findable here on SO, try something along the lines of "apache disable caching". @David's linked tutorial should contain the info as well. – Pekka May 16 '11 at 10:02
  • 1
    @Alex - Just curious, but why don't you want the file to cache? – Shauna May 16 '11 at 14:46
  • It's a dynamically generated sprite – Alex May 25 '11 at 14:55

5 Answers5

8

Another alternative would be to add a random string after your image file.

<img src="/path/to/image/image.jpg?<?php echo time(); ?>/>

This should ensure that the image is reloaded each time the page is displayed.

Tim Cooper
  • 144,163
  • 35
  • 302
  • 261
Garry
  • 1,400
  • 1
  • 14
  • 30
  • Works in many browsers but in IE8, I tacked a random number as a query string at the end of the img src just like that and IE8 still pulls up a cached image! Tried a hash like `image.jpg#random`, also no dice. – East of Nowhere Jun 28 '13 at 15:16
3

mnot has a good caching tutorial that will explain how to set the HTTP headers to request that the image is not cached (remember, you need to set the HTTP headers for the image, not the HTML document).

This is probably a bad idea though as images tend to be relatively chunky, so redownloading it for every page could impose a significant performance slow down.

Quentin
  • 800,325
  • 104
  • 1,079
  • 1,205
3

with apache you cant achieve this in 2 different ways:

with mod_headers:

<FilesMatch "\.(png|jpg|jpeg|jpeg)$">
Header set Expires "Fri, 04 Aug 1978 12:00:00 GMT"
Header set Cache-Control "no-cache, no-store, must-revalidate, max-age=0, proxy-revalidate, no-transform"
Header set Pragma "no-cache"
</FilesMatch>

or with mod_expires:

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/png A0
  ExpiresByType image/gif A0
  ExpiresByType image/jpg A0
  ExpiresByType image/jpeg A0
</IfModule>
Flask
  • 4,891
  • 1
  • 18
  • 39
  • 1
    As I know you can skip 2 lines and left: Header set Cache-Control "no-cache, no-store, max-age=0" – demas May 16 '11 at 13:18
2

If you can't set up caching rules on Apache (as suggested by @David Dorvard's answer - see the part using the <Files directive), you could pipe the image through a PHP script, and set your own (no)caching headers there:

<?php 
header('Cache-Control: no-cache');
header('Expires: 0');
header('Content-Type: image/jpeg'); // or whatever your image is
readfile('/some/path/to/yourfile.jpg');
?>

This should get you an image that's not cached at all; emphasis on should, as various browsers are variously broken (IIRC IE6 cached it anyway when linked as background-image, but thankfully that's on the way out).

Note that this simplistic approach will 1) increase the load on the server as it needs to start PHP for the image request and 2) disable partial download on the script/image

Piskvor left the building
  • 87,797
  • 43
  • 170
  • 220
1

If you are targeting modern browsers you could use an HTML5 Manifest file: http://diveintohtml5.ep.io/offline.html#network

DanBeale
  • 316
  • 4
  • 15
edeverett
  • 7,352
  • 31
  • 28