Site images don't refresh after setting expired headers on .htaccess

Question

I have a site that uses a CSS sprite for all the images. I set the .htaccess file to set the expired headers to a future time as they recommend to improve site performance.

However, when I updated the sprite image none of my browsers on two different computers seem to fetch the new image.

I deleted the .htaccess serveral times but no luck.

I am sure this must be easy as pie to fix but right now I am out of options.

Here is the code inside my .htaccess file:

# CONFIGURE media caching
#
Header unset ETag
FileETag None
<FilesMatch "(?i)^.*\.(ico|flv|jpg|jpeg|png|gif|js|css)$">
Header unset Last-Modified
Header set Expires "Fri, 21 Dec 2012 00:00:00 GMT"
Header set Cache-Control "public, no-transform"
</FilesMatch>

<IfModule mod_deflate.c>
<FilesMatch "\.(js|css)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

Thanks!

Answer 1

Reading the GoDaddy documentation, I see you need to update to "Configuration 2.0" http://help.godaddy.com/article/1078

It would have been more obvious if GoDaddy did not remove the Apache version from their http headers.

Answer 2

By setting the cache date to a date in the future you have told the browser to store the image locally until that date and not request it from the server. Hence, it does not update when you change the image on the server.

For debugging, you can work around this by using Ctrl+F5 to do a hard refresh and request all files from the server.

For production, you need to work around this properly. It is standard practice to attach a version number or last updated date to images, css etc In this case, you could put this into your css:

background: url(/images/my_image.png?201004071748);

and then when you change the image you update the date. This way, when the browser parses the CSS and requests the image, it will think that this is a different image to the one it has cached and send a new request to the server for the image.