HTML problem with refreshing the browser's display of an image

[Edward Diener]

I am working on a web application which programatically changes an image
on the server side ( via ImageMagick ) on the roundtrip between client
and server. When the web page, in which the img tag resides, is
redisplayed, I need Firefox to reread the web page in order to redisplay
the image correctly rather than take the image from its cache.

I have been told that the only reliable way to do this is by using the
content header of the web page to specify certain values which,
according to W3C, browsers are supposed to follow to tell it how to
treat the cache. I have done this, according to the documentation I have
found, and yet the browser does not redisplay the image from the URL but
continues to display it by using its cache. This displays the image
incorrectly since it has changed on the server in the roundtrip between
client and server and back again.

The problem occurs in Firefox ( 2.0.0.11 ) and with IE6 and IE7 also. I
have not tried to test it with any other browsers since the
specification for the web application is that it is only guaranteed to
work with Firefox and IE. The fact that the problem exists with IE as
well as Firefox suggests that some combination in the content header is
not correct to force browsers to not use the cache but instead to reread
the data from the img URL.

Here is the content header, without the cookies, from such a page, as
extracted live:

--------------------------------------------------------

Content-type: text/plain
HTTP/1.1 200 OK
Server: ""
Date: Thu, 24 Jan 2008 16:01:45 GMT
Content-type: text/html
Pragma: no-cache
Cache-control: private,no-cache,no-store,must-revalidate
Expires: -1

--------------------------------------------------------

If anybody can see what is incorrect in the content header and tell me
what I have to change in order to cause the browser to redisplay the
image from the URL and not from its cache, it would be highly
appreciated by me. Getting browsers to redisplay the image correctly,
from changes made on the server side, is crucial to this particular
application, and this problem has persisted for much of the life of the
application without a resolution.

Thank you !

 

[Beauregard T. Shagnasty]

I am working on a web application which programatically changes an image
on the server side ( via ImageMagick ) on the roundtrip between client
and server. When the web page, in which the img tag resides, is
redisplayed, I need Firefox

[and probably any other normal browser]

to reread the web page in order to redisplay the image correctly
rather than take the image from its cache.

<schnipp>

Suggestion: programmatically change the filename of the image in your
HTML. Are you generating pages on the fly? Add a timestamp to both the
<img src="" .. and the same to the filename on the server.

<img src="mypic200801251408.jpg" alt="..." height="..." width="...">

Not the easiest thing in the world to do, but it will definitely
override the cache.

 

[Neredbojias]

Well bust mah britches and call me cheeky, on Fri, 25 Jan 2008 18:20:08 GMT
Edward Diener scribed:

I am working on a web application which programatically changes an image
on the server side ( via ImageMagick ) on the roundtrip between client
and server. When the web page, in which the img tag resides, is
redisplayed, I need Firefox to reread the web page in order to redisplay
the image correctly rather than take the image from its cache.

What is the filename of your page? Is the extension .php?

Test: try using sessions.

 

[Edward Diener]

Well bust mah britches and call me cheeky, on Fri, 25 Jan 2008 18:20:08 GMT
Edward Diener scribed:


What is the filename of your page? Is the extension .php?

Test: try using sessions.

Meaningless !

 

[Edward Diener]

I am working on a web application which programatically changes an image
on the server side ( via ImageMagick ) on the roundtrip between client
and server. When the web page, in which the img tag resides, is
redisplayed, I need Firefox

[and probably any other normal browser]

to reread the web page in order to redisplay the image correctly
rather than take the image from its cache.

<schnipp>

Suggestion: programmatically change the filename of the image in your
HTML. Are you generating pages on the fly? Add a timestamp to both the
<img src="" .. and the same to the filename on the server.

<img src="mypic200801251408.jpg" alt="..." height="..." width="...">

Not the easiest thing in the world to do, but it will definitely
override the cache.

It is ridiculous to have to manipulate the image by constantly changing
its filename just to get a browser not to use the cache for that image,
but if we can not come up with any other solution I guess that is what
we will have to do. Is there really no other way to tell browsers to
ignore the image in its cache ? It is unbelievable to me that this basic
problem in web application programming in the year 2008 is unsolvable
with the current web browser environment except through such a technique
as constant renaming for every client-server roundtrip.

 

[Beauregard T. Shagnasty]

It is ridiculous

I said it was a suggestion. I know it worked for a similar situation for
a 'home page' of an ISP of mine, where there was a lead news photo that
always had the same filename. Every week, some dozen people would
complain in their internal newsgroups about the "old, non-relevant
picture that I've been looking at forever" at the top of the news
section of the page. With a browser set to "fetch new copy with each
visit" the picture changed several times a day.

I'd give you a link to it, 'cept the ISP has moved on and completely
revamped all their pages.

 

[Jonathan N. Little]

Meaningless !

Serve image with PHP and use header() function

<?php
$theImage=[whatever the URL or filespec to your image];
$image=file_get_contents($theImage);

header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date in the past
header("Content-type: image/jpg"); //whatever image type is...
echo $image;
?>

 

[Edward Diener]

Meaningless !

Serve image with PHP and use header() function

<?php
$theImage=[whatever the URL or filespec to your image];
$image=file_get_contents($theImage);

header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1

These are in my OP.

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date in the past

In my OP I have "Expires: -1". Is that invalid for setting an expiration
date in the past ?

header("Content-type: image/jpg"); //whatever image type is...

In my OP I am serving a web page, on which the image resides, so I have:

Content-type: text/html

echo $image;
?>

Thanks, but I am not programming the page using PHP ( I am using C++
instead ). I am, however, programatically setting the content header
cache control and expires values to what was specified in my OP.
Nonetheless the browser is ignoring the cache-control values and
grabbing the image from its cache.

I will try specifically setting the Expires value to a value like you
have above and seeing if that fixes the problem. Perhaps "Expires: -1"
is not valid. That is what the legacy code with which I am working had,
so perhaps it is incorrect.