Can I force the browser to reload cached images in certain scenarios? Caching images is VERY important to the performance of my site, so I don't want to do it globally (if that's even possible), but here's where I'll need this.

I have a page that allows the user to resize or rotate images on the server. After doing so, when the user goes to any page that displays the image (including the direct URL of the image), they are shown the cached version. Of course if the user refreshes their browser they'll see the correct image, but I don't expect all users to know that.

Is there anything I can do to force the browser to refresh? I know there's a meta tag that I can put in html pages that tells the browser not to load from cache, but what about the direct URL to the image? Anyone who knows anything about this subject, your input is greatly appreciated.

FWIW, I've only tested this at work on a corporate network with a hyperactive caching proxy server and at home with just a regular consumer Linksys router.

Thanks!

    Cheapest way: change the filename....

    There used to be a flag in the img tag called NOCACHE that you could use as well, but I'm unsure if it's XHTML standard anymore.

      If you want the client to always reload the images, you can set up an Expire: header on them, which causes them to expire in the past.

      If you only want to sometimes reload them, you can put a query string on them (this is considered a bit of a hack). Especially if you're generating the HTML with PHP.

      <img src="someimage.png?12342563453" />

      Mark

        I have used a PHP function in the past that appends random sequence of numbers to the image img tag (<img src="/images/file.jpg?nocache=14234134354">) . This is a cheap hack definately.

        If you are using Apache, you can make use of mod_expires module. This allows you modify the http Expires and Cache-Control headers that your browser will use to determine content freshness.

          If you are giving the browser a direct url to the image then you will have to do something along the lines of what the previous posters have mentioned (rename or pass a bogus querystring). If you are using PHP to pull the image from the database or the filesystem you could make use of the Last-Modified header. Basically the trick is that when you send the client the image you also send a 'Last-Modified' header indicating the last modification time of that image. Then if the browser or cache plays nice they will send an 'If-Modified-Since' header with the Last-Modified time of the image that they have in the cache. The php script tests for the presence of that 'If-Modified-Since' header and if present evaluates it against the real last modified time of the file. If the file has changed since, it sends the new image with the new last-modified time, otherwise it sends a 304 Not Modified header.

          Here's a decent example.

          http://ontosys.com/php/cache.html

          Ryan

            Write a Reply...