Forcing browser to load new image

Question

I have recently been doing some image replacement work for a client, he sends me the new image png files and I upload them replacing the old ones with the new ones ( keeping the same name ). I tell him that to see the new images he needs to hard refresh the page (shift+refresh) but I can tell that he's wondering when his customers will see those new images, and to be honest I don't know myself. I cant seem to find out either; I also wondered if there is some way I can educate the browser that an image has been changed, and I thought that maybe I could use meta tags to do this, but it seems not.

Can anyone enlighten me on this issue, when does the browser decide (if left to it's own devices) to discard the cached images and load the new ones from the server, and is there any way I can influence this ( other than using different file names and recoding the HTML and CSS to reflect the changes, which I presume would work)

Answer 1

Add one character to the replaced image's name and you've solved the problem!

The issue is browser caching, I use the following code to set far-future expiration dates for all media in order to avoid browsers re-downloading commonly used resources, like images, between page loads.

You could use the same code to cause the reverse effect by altering the date...

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|ico|js|css|swf)(\.gz)?$">
Header set Expires "Thu, 15 Apr 2020 20:00:00 GMT"
Header unset ETag
FileETag None
</FilesMatch>

But browser caches size and other variables are set on the users machine and there is little you can do to guarantee that the image updates (beyond change the filename).

Doing things like this also has a negative for the site and the user - increased bandwidth and increased page load which is bad for SEO and bad for, well, everything.