Reputation: 4611
.button { background: url(../Images/button.png); }
Problem: for performance reason all static content has expiration headers and is cached by browser. When image changes user must refresh cache (Ctrl+F5 in IE). I want images to be cached, but when necessary they must be automatically reloaded.
Question: is next approach 'valid'?
.button {
background: url(../Images/button.png?v=1234);
}
where v=1234 is version of my site. I do not know whether it is 100% valid to write such things in CSS and I do want browsers to still cache images if version is the same. Do all modern browsers correctly cache data with URL parameters part?
Thanks.
Upvotes: 10
Views: 5793
Reputation: 84088
This is discussed in rule 3 of High Performance Web Sites: "Add an Expires or a Cache-Control Header". One of the approaches recommended is to version the files rather than the site.
From the accompanying blog:
Keep in mind, if you use a far future Expires header you have to change the component's filename whenever the component changes. At Yahoo! we often make this step part of the build process: a version number is embedded in the component's filename, for example, yahoo_2.0.6.js.
Upvotes: 0
Reputation: 99841
That looks like a good approach to me, it'll work fine in CSS in modern browsers - the browser will look at the address of the image (including the ?v=1234
), see that it's not cached, and send a fresh request.
Upvotes: 8