Force browser to recache image on picture

Question

I have thumbnail PHP script what remakes thumbnails. All is working fine until it loads the thumbnail, the browser fails to reload the image from the server and displays the old thumbnail. I have tried following tricks:

  header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
  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");

As well as meta tags:

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Expires" content="Tue,01 Dec 1990 06:30:00 GMT">

Question is, am I doing something wrong or there is another method? I know of adding "?randomnumber" trick to the end of the image. However, I really do not want to use it, since it would mean browser caching large amounts of images as well as making things look messy. And I have no real way to get thumbnail edit date reliably.

It's probably because your server isn't configured to do that, take a look at the .htaccess file: https://stackoverflow.com/a/11724596/5374294 — Orry, Mar 08 '18 at 22:55
Unless you really want to completely disable caching, I recommend appending the ["file modified" timestamp](http://php.net/manual/en/function.filemtime.php) to the URL (instead of a random number). That way, only files that have not changed since the last load will be loaded from cache. — showdev, Mar 08 '18 at 22:59
@showdev So far this seems the best and most elegant way. Thanks — GhostPengy, Mar 08 '18 at 23:16

score 1 · Accepted Answer · answered Mar 09 '18 at 00:54

Caches operate on the headers you send along with the response, and if the cache already has a copy of the resource that says whose header says it's not expired then it has no reason to look at the upstream and no amount of futzing with the headers of subsequent responses will change that.

This is how HTTP works.

If you want the new version of the thumbnail to show up you can:

Only send caching headers that are small enough that you don't shoot yourself in the foot like this.
Send headers that explicitly disable caching.
- See: https://stackoverflow.com/a/2068407/1064767
Change the filename when the content changes.
Append cache-breaking data to the url, aka img.jpg?t={$file_modification_timestamp}

This is a comprehensive listing of your options, regardless of how unattractive you may find them.

The article was the thing that did the trick. I modified header a bit and it worked like a charm. Thanks! — GhostPengy, Mar 09 '18 at 09:50

score -1 · Answer 2 · answered Mar 08 '18 at 23:07

-1

There's a low-tech-html-php approach i will occasionally deploy when i HAVE to clear the cache. Throw a query string on the image tag src! If you make the query string random by echo-ing out a random number, it will break the cache for that image every time.

    <img src="/images/logo.png?v=<?=rand(1, 10)?>" border="0">

Query Stringed Image

answered Mar 08 '18 at 23:07

dustbuster

55,449
4
9
31

2

The OP specifically wants to avoid appending a random number, "since it would mean browser caching large amounts of images as well as making things look messy." You might consider addressing those concerns. – showdev Mar 08 '18 at 23:13

score -2 · Answer 3 · answered Mar 08 '18 at 23:00

-2

Try put this:

image.jpg?foo=20180308136060 //year, month, day, hours, minute and seconds

answered Mar 08 '18 at 23:00

Isaac Fraire

27
2

1

Did you not read what they wrote? *"I know of adding "?randomnumber" trick to the end of the image. However, I really **do not want to use it,** since it would mean browser caching large amounts of images as well as making things look messy."* – Funk Forty Niner Mar 08 '18 at 23:01
@showdev right; it'll load once and keep that same one in memory. – Funk Forty Niner Mar 08 '18 at 23:03

Force browser to recache image on picture

3 Answers3