911 Votes

Reload Images, CSS, JS and Web Pages despite Browser Cache

Tip by Stefan Trost | Last update on 2023-01-13 | Created on 2012-04-22

The caching of content through the browser is very useful and reasonable in order not to always have to transmit the same files again and again. However, sometimes it can also be disturbing. For example, if we have updated individual web pages, images, stylesheets, JavaScript files or any other files and we want these files to be reloaded in any case so that the user does not see an old version of the file from the browser cache.

Quickly and easily we solve this problem by simply attaching an arbitrary parameter to the relevant resources. In the next sections you will find explanations and some examples on the basis of various resources for that - an alternative method is introduced in the last section:

Images

Let's first look at an example of an image file that we have updated and now want to be reloaded with each new request:

<img src="image.png" alt="Old Image">
<img src="image.png?v=2" alt="Updated Image">

So far, like it can be seen in the first line of the example, we have just included our image under the name "image.png", as the image file is also named on our server.

Now we have updated the image and get the following problem: The users who have already visited our site have saved the old file "image.png" in the cache of their browsers and if we would further continue to integrate the image as "image.png", these users would still get the old picture to see, since the browser would show the image known to him without taking care about that the picture under "image.png" has changed and is no longer the old one.

But now we come to our trick: After changing the picture, we simply hang any parameter on the old name of the image file. In our example we use the parameter "v=2", but we could also use any other parameter such as "x=1" or "new=yes". Since the browser thinks that the parameter has a relevance and an influence on the picture, the browser will reload the image and not obtain the old one from the cache. Of course, the browser does not know that the parameter has no meaning at all.

Of course, this trick also works for links to websites:

<a href="page">Old Page</a>
<a href="page?q=2">Updated Page</a>

The old site was available under the URL "page" and may be stored in the cache of the browser of some visitors. If we now attach any parameter to the URL like "q=2" here and link "page?q=2" instead of "page" only, the browser notices that he does not have this URL in his cache and refreshes the page. If we update the page again, we can simply use another parameter such as "q=3".

In the case of websites, we only have to be careful that the parameter does not really have an impact on the content of the page and therefore we have to choose a parameter that is not relevant in any form when creating the page.

Stylesheets, Fonts, JavaScript and other external Files

We can use the method for any files, including for example, for CSS stylesheets, JavaScripts...

<link rel="stylesheet" href="style.css?p=1" type="text/css">
<script src="script.js?x=3"></script>

...or font files:

@font-face {
   font-family: 'Test';
   url(/fonts/font.woff?w=17) format('woff');
}

The parameter - what we take does not matter here either - ensures that the files are not loaded from the cache, but reloaded from your webspace. For pictures, pages and files that have not changed, we simply leave out the parameter and can make use of the cache.

Alternative Method

An alternative method to bypass the browser cache is to give a file a new name with every update of the file. So for example:

<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="style1.css" type="text/css">
<link rel="stylesheet" href="style2.css" type="text/css">
<link rel="stylesheet" href="style3.css" type="text/css">

Here, we renamed our original file "style.css" to "style1.css" at the first update, then to "style2.css" and so on.

Which of the two methods is the better choice depends on the application and which method can be implemented easier and with less effort.

ReplyPositiveNegativeDateVotes
00 Votes

Great hint. Works simple and effective even after almost 10 years.
2022-02-14 at 18:27

ReplyPositive Negative
00 Votes

Thanks, thanks, thanks!

Finally, I don't have to explain to any user how to delete the cache when I have changed something :-)
2022-09-04 at 16:30

ReplyPositive Negative
Reply

About the Author

AvatarYou can find Software by Stefan Trost on sttmedia.com. Do you need an individual software solution according to your needs? - sttmedia.com/contact
Show Profile

 

Related Topics

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.

Participate

Ask your own question or write your own article on askingbox.com. That’s how it’s done.