Disable cache for some images

Question

I generate some images using a PHP lib   Sometimes the browser does not load the new generated file    How can I disable cache just for images created dynamically by me   Note  I have to use same name for the created images over time

User · Answer

If you need to do it dynamically in the browser using javascript  here is an example      lt img id graph alt       src  http   www kitco com images live gold gif       gt    lt script language  javascript  type  text javascript  gt      var d   new Date         document getElementById  graph   src           http   www kitco com images live gold gif ver             d getTime     lt  script gt

User · Answer

Changing the image source is the solution  You can indeed do this by adding a timestamp or random number to the image    Better would be to add a checksum of eg the data the image represents  This enables caching when possible

User · Answer

Let s add another solution one to the bunch   Adding a unique string at the end is a perfect solution    example jpg 646413154   Following solution extends this method and provides both the caching capability and fetch a new version when the image is updated   When the image is updated  the filemtime will be changed    lt  php  filename    path to images example jpg    filemtime   filemtime  filename     gt    Now output the image    lt img src  images example jpg  lt  php echo  filemtime    gt    gt

User · Answer

Simple  send one header location   My site  contains one image  and after upload the image  there not change  then I add this code    lt  php header  Location  pagelocalimage php      gt    Work s for me

User · Answer

If you have a hardcoded image URL  for example  http   example com image jpg you can use php to add headers to your image   First you will have to make apache process your jpg as php   See here  Is it possible to execute PHP with extension file php jpg   Load the image  imagecreatefromjpeg  from file then add the headers from previous answers  Use php function header to add the headers    Then output the image with the imagejpeg function   Please notice that it s very insecure to let php process jpg images  Also please be aware I haven t tested this solution so it is up to you to make it work

User · Answer

I know this topic is old  but it ranks very well in Google  I found out that putting this in your header works well    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

User · Answer

I was just looking for a solution to this  and the answers above didn t work in my case  and I have insufficient reputation to comment on them   It turns out that  at least for my use-case and the browser I was using  Chrome on OSX   the only thing that seemed to prevent caching was   Cache-Control    no-store    For completeness i m now using all 3 of  no-cache  no-store  must-revalidate   So in my case  serving dynamically generated images out of Flask in Python   I had to do the following to hopefully work in as many browsers as possible     def make uncached response inFile       response   make response inFile      response headers  Pragma-Directive      no-cache      response headers  Cache-Directive      no-cache      response headers  Cache-Control      no-cache  no-store  must-revalidate      response headers  Pragma      no-cache      response headers  Expires      0      return response

User · Answer

I checked all the answers and the best one seemed to be  which 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

Solution 1 is not great  It does work  but adding hacky random or timestamped query strings to the end of your image files will make the browser re-download and cache every version of every image  every time a page is loaded  regardless of weather the image has changed or not on the server   Solution 2 is useless  Adding nocache headers to an image file is not only very difficult to implement  but it s completely impractical because it requires you to predict when it will be needed in advance  the first time you load any image which you think might change at some point in the future   Enter Etags     The absolute best way I ve found to solve this is to use ETAGS inside a  htaccess file in your images directory  The following tells Apache to send a unique hash to the browser in the image file headers  This hash only ever changes when time the image file is modified and this change triggers the browser to reload the image the next time it is requested    lt FilesMatch     jpg jpeg    gt  FileETag MTime Size  lt  FilesMatch gt

User · Answer

i had this problem and overcoming like this    var newtags   lt div class  addedimage  gt  lt h5 gt preview image lt  h5 gt  lt img src    one   nocache   Math floor Math random     1000     gt  lt  div gt

User · Answer

A common and simple solution to this problem that feels like a hack but is fairly portable is to add a randomly generated query string to each request for the dynamic image   So  for example -   lt img src  image png    gt    Would become   lt img src  image png dummy 8484744    gt    Or   lt img src  image png dummy 371662    gt    From the point of view of the web-server the same file is accessed  but from the point of view of the browser no caching can be performed   The random number generation can happen either on the server when serving the page  just make sure the page itself isn t cached      or on the client  using JavaScript    You will need to verify whether your web-server can cope with this trick

User · Answer

Browser caching strategies can be controlled by HTTP headers   Remember that they are just a hint  really   Since browsers are terribly inconsistent in this  and any other  field  you ll need several headers to get the desired effect on a range of browsers   header   Pragma-directive  no-cache    header   Cache-directive  no-cache    header   Cache-control  no-cache    header   Pragma  no-cache    header   Expires  0

User · Answer

I ve used this to solve my similar problem     displaying an image counter  from an external provider   It did not refresh always correctly  And after a random parameter was added  all works fine     I ve appended a date string to ensure refresh at least every minute   sample code  PHP     output      lt img src   http   xy somecounter com  id 1234567890 amp   date ymdHi      alt   somecounter com   style   border none    gt      That results in a src link like   http   xy somecounter com  id 1234567890 amp 1207241014

[html] Disable cache for some images

Examples related to html

Examples related to image

Examples related to caching