Cached images updated

HTML & CSS
1

Hi, we have a top bar on our website that we continually change for special holidays and announcements and such.

Right now we’re doing a Christmas theme. When we redesign it and slice it up, we just replace the previous slices with the new images, keeping their names exactly the same, without touching the HTML and CSS.

Problem is our readers sometimes still see the old images, since it was cached on their machines.

What can a person do to ensure they see the new images. If they refresh (CTRL + F5), they’ll see the new images, but no-one refreshes websites.

2

You can add some meta tags to your header to prevent caching, though I’m not sure how reliable they are.

Examples include:

<meta Http-Equiv="Cache-Control" Content="no-cache">
<meta Http-Equiv="Pragma" Content="no-cache">
<meta Http-Equiv="Expires" Content="0">

Alternatively, I gather it works better to add this to a .htaccess file (if your site is served by Apache, of course):

<FilesMatch "\\.(html|htm|js|css)$">
Header set Cache-Control "max-age=0, no-cache, no-store, private"
Header set Pragma "no-cache"
Header set Expires "0"
</FilesMatch>

I’ve never tried any of these options, though, so this is just hearsay. :slight_smile:

3

Ralph’s methods work but have a huge drawback: they will disable caching completely! The problem with this is that people will have download each every CSS file/JS file/image/whatever every time they visit your website.
And that results in:

  1. A serious hit on your bandwidth
  2. A slower experience of your website for visitors

It is therefore recommended to use methods that do allow for caching, but indicate when the cached file is out of date. One way to go about this is to use Apache’s mod_expires (if your webserver is Apache) which has very extensive configuration options. Or Google’s quite recent mod_pagespeed.
Another quite simple approach is to add a query string to assets you might want to refresh later, and refresh the query string when a new asset is uploaded.
For example if you have a logo.jpg, don’t refer to it as logo.jpg, but logo.jpg?v=1
When you have a new logo, update the HTML to use logo.jpg?v=2, next ?v=3, etc.
It will not actually do anything with the image, but the URL changes, so the browser will no longer use the ?v=1 cached version, but download the new ?v=2 file instead.
Of course if the HTML itself is also cached this technique wouldn’t help you one bit, so you need to make sure that HTML isn’t cached, or uses some advanced caching techniques like mod_expires.

Hope that makes sense :slight_smile:

1 Like
4

the only way I know to guarantee the image will be downloaded every time is to append a different “dummy” unique value to the src of the image every time the page is loaded.

this will guarantee a new image request every time because the url to the image will be different.

A javascript solution could be to append the current date/time to the src of the image

 
<script type="text/javascript">
 
window.onload=function() {
    //get the current date/time
    var currdate = new Date();
    currdate = encodeURI(currdate.toString());

    //get all the img elements
    var imgO = document.getElementsByTagName('img');

    //add currDate to each src
    for(var i=0; i < imgO.length; i++) {
         imgO[i].src += '?myPic='+currdate;
    }
} 
</script>

you could use a similar concept to append a unique value to the src in PHP.

5

Thanks guys! Much appreciated. I’ll try this! :slight_smile: