SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cached images updated

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    You can add some meta tags to your header to prevent caching, though I'm not sure how reliable they are.

    Examples include:

    Code:
    <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):

    Code:
    <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.

  3. #3
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    8,903
    Mentioned
    138 Post(s)
    Tagged
    2 Thread(s)
    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
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  4. #4
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    Code:
     
    <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. #5
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys! Much appreciated. I'll try this!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •