How to force a web browser NOT to cache images

Question

Background  I am writing and using a very simple CGI-based  Perl  content management tool for two pro-bono websites  It provides the website administrator with HTML forms for events where they fill the fields  date  place  title  description  links  etc   and save it  On that form I allow the administrator to upload an image related to the event  On the HTML page displaying the form  I am also showing a preview of the picture uploaded  HTML img tag    The Problem  The problem happens when the administrator wants to change the picture  He would just have to hit the  browse  button  pick a new picture and press ok  And this works fine   Once the image is uploaded  my back-end CGI handles the upload and reloads the form properly   The problem is that the image shown does not get refreshed  The old image is still shown  even though the database holds the right image  I have narrowed it down to the fact that the IMAGE IS CACHED in the web browser  If the administrator hits the RELOAD button in Firefox Explorer Safari  everything gets refreshed fine and the new image just appears   My Solution - Not Working  I am trying to control the cache by writing a HTTP Expires instruction with a date very far in the past   Expires  Mon  15 Sep 2003 1 00 00 GMT   Remember that I am on the administrative side and I don t really care if the pages takes a little longer to load because they are always expired   But  this does not work either   Notes  When uploading an image  its filename is not kept in the database  It is renamed as Image jpg  to simply things out when using it   When replacing the existing image with a new one  the name doesn t change either  Just the content of the image file changes   The webserver is provided by the hosting service ISP  It uses Apache   Question  Is there a way to force the web browser to NOT cache things from this page  not even images   I am juggling with the option to actually  save the filename  with the database  This way  if the image is changed  the src of the IMG tag will also change  However  this requires a lot of changes throughout the site and I rather not do it if I have a better solution  Also  this will still not work if the new image uploaded has the same name  say the image is photoshopped a bit and re-uploaded

User · Answer

From my point of view  disable images caching is a bad idea  At all    The root problem here is - how to force browser to update image  when it has been updated on a server side    Again  from my personal point of view  the best solution is to disable direct access to images  Instead access images via server-side filter servlet other similar tools services   In my case it s a rest service  that returns image and attaches ETag in response  The service keeps hash of all files  if file is changed  hash is updated  It works perfectly in all modern browsers  Yes  it takes time to implement it  but it is worth it   The only exception - are favicons  For some reasons  it does not work  I could not force browser to update its cache from server side  ETags  Cache Control  Expires  Pragma headers  nothing helped    In this case  adding some random version parameter into url  it seems  is the only solution

User · Answer

Simple fix  Attach a random query string to the image    lt img src  foo cgi random 323527528432525 24234  alt    gt    What the HTTP RFC says   Cache-Control  no-cache   But that doesn t work that well

User · Answer

With the potential for badly behaved transparent proxies in between you and the client  the only way to totally guarantee that images will not be cached is to give them a unique uri  something like tagging a timestamp on as a query string or as part of the path   If that timestamp corresponds to the last update time of the image  then you can cache when you need to and serve the new image at just the right time

User · Answer

You may write a proxy script for serving images - that s a bit more of work though  Something likes this   HTML    lt img src  image php img imageFile jpg amp some-random-number-262376    gt    Script      PHP if  isset    GET  img      amp  amp  is file  IMG PATH     GET  img               read contents    f   open  IMG PATH     GET  img         img    f read       f close          no-cache headers - complete set      these copied from  php net header  1   tested myself - works   header  Expires  Sat  26 Jul 1997 05 00 00 GMT       Some time in the past   header  Last-Modified      gmdate  D  d M Y H i s       GMT       header  Cache-Control  no-store  no-cache  must-revalidate       header  Cache-Control  post-check 0  pre-check 0   false      header  Pragma  no-cache           image related headers   header  Accept-Ranges  bytes      header  Content-Length    strlen   img        How many bytes we re going to send   header  Content-Type  image jpeg       or image png etc       actual image   echo  img    exit        Actually either no-cache headers or random number at image src should be sufficient  but since we want to be bullet proof

User · Answer

I made a PHP script that automatically adds the timestamps for all images in the HTML page  You just need to include this script in your pages  Enjoy   http   alv90 altervista org how-to-force-the-browser-not-to-cache-images

User · Answer

You must use a unique filename s   Like this   lt img src  cars png 1287361287  alt    gt    But this technique means high server usage and bandwidth wastage  Instead  you should use the version number or date  Example    lt img src  cars png 2020-02-18  alt    gt    But you want it to never serve image from cache  For this  if the page does not use page cache  it is possible with PHP or server side    lt img src  cars png  lt  php echo time     gt   alt    gt    However  it is still not effective  Reason  Browser cache     The last but most effective method is Native JAVASCRIPT  This simple code finds all images with a  NO-CACHE  class and makes the images almost unique  Put this between script tags   var items   document querySelectorAll  img NO-CACHE    for  var i   items length  i--         var img   items i       img src   img src         Date now        USAGE   lt img class  NO-CACHE  src  https   upload wikimedia org wikipedia commons 6 6a JavaScript-logo png  alt    gt    RESULT s  Like This  https   example com image png 1582018163634

User · Answer

Armin Ronacher has the correct idea  The problem is random strings can collide  I would use    lt img src  picture jpg 1222259157 415  alt    gt    Where  1222259157 415  is the current time on the server  Generate time by Javascript with performance now   or by Python with time time

User · Answer

Add a time stamp  lt img src  picture jpg t  lt  php echo time     gt   gt   will always give your file a random number at the end and stop it caching

User · Answer

I assume original question regards images stored with some text info  So  if you have access to a text context when generating src     url  consider store use CRC32 of image bytes instead of meaningless random or time stamp  Then  if the page with plenty of images is displaying  only updated images will be reloaded  Eventually  if CRC storing is impossible  it can be computed and appended to the url at runtime

User · Answer

I m a NEW Coder  but here s what I came up with  to stop the Browser from caching and holding onto my webcam views    lt meta Http-Equiv  Cache  content  no-cache  gt   lt meta Http-Equiv  Pragma-Control  content  no-cache  gt   lt meta Http-Equiv  Cache-directive  Content  no-cache  gt   lt meta Http-Equiv  Pragma-directive  Content  no-cache  gt   lt meta Http-Equiv  Cache-Control  Content  no-cache  gt   lt meta Http-Equiv  Pragma  Content  no-cache  gt   lt meta Http-Equiv  Expires  Content  0  gt   lt meta Http-Equiv  Pragma-directive  no-cache  gt   lt meta Http-Equiv  Cache-directive  no-cache  gt    Not sure what works on what Browser  but it does work for some  IE  Works when webpage is refreshed and when website is revisited  without a refresh   CHROME  Works only when webpage is refreshed  even after a revisit   SAFARI and iPad  Doesn t work  I have to clear the History  amp  Web Data   Any Ideas on SAFARI  iPad

User · Answer

I would use    lt img src  picture jpg 20130910043254  gt    where  20130910043254  is the modification time of the file      When uploading an image  its filename is not kept in the database  It is renamed as Image jpg  to simply things out when using it   When replacing the existing image with a new one  the name doesn t change either  Just the content of the image file changes    I think there are two types of simple solutions  1  those which come to mind first  straightforward solutions  because they are easy to come up with   2  those which you end up with after thinking things over  because they are easy to use   Apparently  you won t always benefit if you chose to think things over  But the second options is rather underestimated  I believe  Just think why php is so popular

User · Answer

I checked all the answers around the web and the best one seemed to be   actually it isn t    lt img src  image png cache none  gt    at first   However  if you add cache none parameter  which is static  none  word   it doesn t effect anything  browser still loads from cache   Solution to this problem was    lt img src  image png nocache  lt  php echo time      gt   gt    where you basically add unix timestamp to make the parameter dynamic and no cache  it worked   However  my problem was a little different  I was loading on the fly generated php chart image  and controlling the page with   GET parameters  I wanted the image to be read from cache when the URL GET parameter stays the same  and do not cache when the GET parameters change   To solve this problem  I needed to hash   GET but since it is array here is the solution    chart hash   md5 implode  -     GET    echo   lt img src   images mychart png hash  chart hash  gt      Edit   Although the above solution works just fine  sometimes you want to serve the cached version UNTIL the file is changed   with the above solution  it disables the cache for that image completely  So  to serve cached image from browser UNTIL there is a change in the image file use   echo   lt img src   images mychart png hash     filemtime  mychart png        gt         filemtime   gets file modification time

User · Answer

Ideally  you should add a button keybinding menu to each webpage with an option to synchronize content   To do so  you would keep track of resources that may need to be synchronized  and either use xhr to probe the images with a dynamic querystring  or create an image at runtime with src using a dynamic querystring  Then use a broadcasting mechanism to notify all components of the webpages that are using the resource to update to use the resource with a dynamic querystring appended to its url   A naive example looks like this   Normally  the image is displayed and cached  but if the user pressed the button  an xhr request is sent to the resource with a time querystring appended to it  since the time can be assumed to be different on each press  it will make sure that the browser will bypass cache since it can t tell whether the resource is dynamically generated on the server side based on the query  or if it is a static resource that ignores query   The result is that you can avoid having all your users bombard you with resource requests all the time  but at the same time  allow a mechanism for users to update their resources if they suspect they are out of sync    lt  DOCTYPE html gt   lt html xmlns  http   www w3 org 1999 xhtml  gt     lt head gt       lt meta http-equiv  Content-Type  content  text html  charset utf-8    gt       lt meta name  viewport  content  width device-width  initial-scale 1 0    gt       lt meta name  mobile-web-app-capable  content  yes    gt               lt title gt Resource Synchronization Test lt  title gt       lt script gt  function sync         var xhr   new XMLHttpRequest      xhr onreadystatechange   function             if  this readyState    4  amp  amp  this status    200                            var images   document getElementsByClassName  depends-on-resource                 for  var i   0  i  lt  images length    i                    var image   images i                   if  image getAttribute  data-resource-name       resource bmp                         image src    resource bmp i     new Date   getTime                                                                        xhr open  GET    resource bmp   true       xhr send           lt  script gt     lt  head gt     lt body gt       lt img class  depends-on-resource  data-resource-name  resource bmp  src  resource bmp  gt  lt  img gt       lt button onclick  sync    gt sync lt  button gt     lt  body gt   lt  html gt

User · Answer

Your problem is that despite the Expires  header  your browser is re-using its in-memory copy of the image from before it was updated  rather than even checking its cache   I had a very similar situation uploading product images in the admin backend for a store-like site  and in my case I decided the best option was to use javascript to force an image refresh  without using any of the URL-modifying techniques other people have already mentioned here   Instead  I put the image URL into a hidden IFRAME  called location reload true  on the IFRAME s window  and then replaced my image on the page   This forces a refresh of the image  not just on the page I m on  but also on any later pages I visit - without either client or server having to remember any URL querystring or fragment identifier parameters   I posted some code to do this in my answer here

User · Answer

When uploading an image  its filename is not kept in the database  It is renamed as Image jpg  to simply things out when using it     Change this  and you ve fixed your problem  I use timestamps  as with the solutions proposed above  Image- lt timestamp  jpg  Presumably  whatever problems you re avoiding by keeping the same filename for the image can be overcome  but you don t say what they are

User · Answer

use Class  NO-CACHE   sample html    lt div gt       lt img class  NO-CACHE  src  images img1 jpg    gt       lt img class  NO-CACHE  src  images imgLogo jpg    gt   lt  div gt    jQuery         document  ready function                                 NO-CACHE   attr  src  function      return   this  attr  src       a     Math random                 javascript   var nods   document getElementsByClassName  NO-CACHE    for  var i   0  i  lt  nods length  i          nods i  attributes  src   value      a     Math random        Result  src  images img1 jpg         src  images img1 jpg a 0 08749723793963926

User · Answer

I use PHP s file modified time function  for example   echo  lt img  src  Images image png     filemtime  Images image png           gt      If you change the image then the new image is used rather than the cached one  due to having a different modified timestamp

[html] How to force a web browser NOT to cache images

Examples related to html

Examples related to image

Examples related to caching

Examples related to browser-cache

Examples related to image-caching