One way to change an image on your website is to find that image in Files, click the file's name and then use the Replace feature to upload a new image.
This is a great option because it will update that image everywhere that it is used, however there can be complications. To speed up people's experience, many browsers employ aggressive caching techniques that don't always check to see if an image has changed when the file's name is unchanged.
There are some code techniques (see below) you can use to get browsers to look for a new version of a file. If you don't have access to change the code that references the file you are updating, then there's not much you can do to force a browser to update its cache.
The good news is that no one looks at your website as much as you do and browser caches typically expire ever few days. So in all likelihood your website visitors will see your new image.
But wait there's more!
Purge the file from the CDN
SiteWrench uses a CDN to improve your site's speed and security. If you replace a file and don't see the update right away, it may also be cached in the CDN. Anytime you suspect that may be the case you can purge the URL from the CDN.
Go to Admin > Settings > General (/admin/settings/general.aspx), scroll to the bottom and use the Cloudflare Settings text area to purge the file.
Be sure to use the file's full URL. You can find that URL by clicking the image preview in Files and looking in the address bar of the new window that opens.
Cache Busting - The quick and dirty way
If you do have access to the HTML that references an image you can append a different value to the end of the file name and any cache will assume the image is new. Here's what it looks like:
Original:
<img src="https://assetsdev.speakcdn.com/assets/1908/tagme21.jpg" />
Busted:
<img src="https://assetsdev.speakcdn.com/assets/1908/tagme21.jpg?whateveryouwanttoputhere" />
Add a ? and any value or change the value that's there - letters and numbers only, no spaces please. That's all there is to it.
Hint: This works on any file reference anywhere making it useful for externally referenced CSS and Script files.
Comments
0 comments
Article is closed for comments.