Caching of Images on SharePoint Online Pages

[owertz]

Here is the scenario:

• We have a SharePoint Online site which has a document library containing an image, e.g. performance.png.
• This image is updated each day using a Power Automate flow, but the file name remains the same. 
• The image was added to our home page within our site using the Image web part. But, when when we view those pages, they contain the previous version of the image, the cached version. 
• When we press Ctrl+F5, the image doesn't always update. We also try F12 > right click refresh button > Empty Cache and Hard Reload, but the image doesn't always update this way either. 
• We have tried both Google Chrome and Microsoft Edge.
• We have also tried adding a hidden script on the page using the Modern Script Editor web part to force reload the page every 5 minutes

 <meta http-equiv="refresh" content="300">

<script>
 setInterval(function() {
                  window.location.reload();
                }, 300000); 
</script>

How can I force the latest version of the images to appear without the need to force a hard refresh each time that we navigate to the page? Is there a way to switch off caching on that page? 

Any help would be greatly appreciated!

[#2 · Accepted solution]

1. Append a unique query string parameter to the image URL: You can append a unique query string parameter to the image URL each time it's updated, which will force the browser to reload the image. For example, you can add "?v=1" to the end of the image URL, and then increment the value of "v" each time the image is updated. This can be done in Power Automate by using the "Compose" action to append the query string parameter to the file URL.

2. Change the file name of the image: If appending a query string parameter doesn't work, you can try changing the file name of the image each time it's updated. For example, you can add a timestamp or date to the file name to ensure that it's unique. This will force the browser to load the new version of the image.

3. Use a content delivery network (CDN): You can use a CDN, such as Azure CDN or Amazon CloudFront, to serve the image file. CDNs cache content on servers located closer to the end user, which can improve performance and reduce the likelihood of browser caching issues.

4. Disable caching for the image file: You can configure your SharePoint site to disable caching for the image file. To do this, go to the site settings, select "Site collection features", and then activate the "Output Cache" feature. This will disable caching for the entire site. Alternatively, you can use the "Cache-Control" HTTP header to control caching for individual files.

@owertz 

[#3]

@jaortizgolf78 

Firstly, thank you for the quick response! It's very much appreciated. I'm replying with my update on this, as I've continued to work on trying to implement one of your suggestions:

1. My colleagues and I aren't extremely familiar Power Automate, and I'm new to web development all together. We weren't able to get this flow to work properly that generated a URL that actually worked. 
2. This would be the "obvious" solution to the issue. However, we weren't able to create a way to update the image with the new file name on our SharePoint home page without manually updating it every day, which won't work for us.
3. This solution seemed to yield the most results. We had no issues creating a Private Azure CDN and serving the image file on that CDN. However, it doesn't consistently update. Some days the caching gets refreshed, other days it does not. I've reached out to my Microsoft rep for assistance with this one, as this is not expected behavior.
4. This option doesn't exist in SharePoint for Microsoft 365. Looks all throughout the site and page settings, but wasn't able to find that specific setting. 

Either way, I think the CDN route will be the solution to the issue once I get an update from MS on the issue. I'll update when I have a compete solution. 

Thanks again!

[#4]

"Off-page" refers to actions and strategies employed outside of your website to increase its exposure and ranks in search engine results in the context of SEO (Search Engine Optimisation). Off-page SEO concentrates on elements that, while not directly under your website's control, might affect its popularity, authority, and reputation online. These elements aid search engines in determining how relevant and reliable your website is, which may have an effect on how high it appears in search results.