Question

In our application we have two use cases in which we want to avoid retrieving an out-of-date image from the browser cache:

1. A user changes her profile picture.
2. A user changes the picture of another users she is allowed to manage (think of a team and their captain).

In the upload view, we don’t have any problem by appending a timestamp to the image URL, as already suggested in other questions (Refresh image after AJAX file upload, Break image caching). For all other views, there might be a problem with that simple approach: we actually want to use the cache where possible, but avoid it, if we know that we have recently updated the image.

In our application, an administrative user uses a userlist which represents users by their user image (I know, this is revolutionary). If she has just changed one of the user images, she wants this list to show the new image. Same for every other time she sees the user’s image.

We cannot add ?timestamp={now} to every image in this user list, because this would destroy the benefit of any caching.

Any recommendations for a good approach that uses the cache as much as possible and reloads images that we know we have updated?

Answer 1

The solution we have chosen for now:

1. We plan to set appropriate headers for images (see this very good answer)
2. We store a local list of updated images which is used when rendering the URLs

Part 2 may need some explanation: Fortunately we use a very good JS framework on the frontend that allows us to define arbitrary methods and use them in templates. Our models have one method that returns the photo URL and this URL is used in every template.

When uploading a new image, we associate the id with the current time stamp in localStorage:

window.localStorage['nocache.'+id] = new Date().getTime()

Whenever we request an image path, we look into localStorage to see whether we have to append a timestamp to the URL, otherwise the URL is returned as is.

Advantages / Improvements

• Updates the user has triggered herself will be available immediately, not only after the cache expires.
• All other resources use the cache.
• We look into localStorage for every image URL we are building. This may be expensive.
• We always have to go through the model’s method to create a photo URL (from a DRY-perspective good, but we are bound to using the model)

Code

The code to generate the URL looks like this

getPhotoUrl: function() {
    return api.getImageUrl(this.id)
}

In API (very simplified)

getImageUrl: function(id) {
    var url = "/prefix/something/user/" + id + "/image";
    // if we have stored a timestamp, add that to the URL
    var noCache = window.localStorage['nocache.'+id];
    if (noCache !== undefined) {
        url += "?" + noCache;
    }
    return url;
}

The template code remains the same:

<!-- render via img.src -->
<img src="<%= user.getPhotoUrl() %>" alt="<%= user.lastname %>" />

<!-- render via CSS background -->
<div class="img" alt="<%= this.shortUsername %>"
    style="background-image: url('<%= this.getPhotoUrl() %>')">
    ...
</div>