How to fingerprint urls of CSS images with SquishIT

1k views Asked by At

We use SquishIt for our CSS and JS and it works really well for cache invalidation. Whenever we change our CSS or JS, a new URL is generated which forces the browser to load the updated files.

However, assets such as background images have their urls in the CSS. When we change the image, we have the same issue with cache invalidation that we used to have with CSS and JS before SquishIt.

By default, our IIS is set to serve headers to cache all images for 30 days so when an image is updated the browser doesn't even request it, as it just grabs it from cache.

Is there a way to get SquishIt to insert a fingerprint into the image urls within the CSS? If we could do that we could use Url rewriting to strip the fingerprint out again and serve up the latest image.

I want to do this automatically and avoid the situation where you have to remember to update any references to the image in the CSS when you change the image.

1

There are 1 answers

2
AlexCuse On

This should already be in place. You need to call .AppendHashForAssets() on your bundle when setting it up to opt-in to the behavior though (this is optional behavior because calculating the hashes could get expensive in some situations)

see https://github.com/jetheredge/SquishIt/blob/master/SquishIt.Framework/CSS/CSSBundle.cs#L148-156