Graphics caching.. how does it work?

[hstraf]

My client has designed a very graphic intensive (read: +130kb) page for their site template. Besides having to use frames, I'm trying to identify any other issues.

One question I have: Typically, once the initial page loads, the graphics will remain in cache, right? So when other pages load, the browser will retrieve the stored graphic, and not go to the server all over again.. is that right? Does this scenario change if the user has set their browser in any way? (ie: check for new page at every visit, etc..)

Thanks.

[BC]

Originally posted by hstraf
One question I have: Typically, once the initial page loads, the graphics will remain in cache, right?

That is correct.

So when other pages load, the browser will retrieve the stored graphic, and not go to the server all over again.. is that right?

That is correct, as long as the way you reference to the image is the same on the other pages. What I mean by this is that the HTML code <img src="/images/picture.jpg"> remains the same on each and every other page.

So if you have one page with <img src="picture.jpg"> and another page which has <img src="images/picture.jpg"> and yet another page which has <img src="/images/picture.jpg">, then the image will be loaded three times direct from the server, not the cache because each image has been referenced differently.

Does this scenario change if the user has set their browser in any way? (ie: check for new page at every visit, etc..)

It partly depends on whether you're going through a proxy or not. With some proxies you will get the same page as you visited 2 weeks ago, and you would have to click 'Shift-Refresh/Reload' to get the newest version of the page. With other proxies the latest version is always cached in your ISP's proxy, so it pays to experiment.

And yes, it also depends on your browser's settings.... If you have "check for new page at every visit" then the browser will go direct to the server every time.

[lynlimz]

That was a brilliant reply BC. Didn't knew about the proxy thing

[BC]

Originally posted by lynlimz
That was a brilliant reply BC. Didn't knew about the proxy thing

The joys of working as a sysadmin

[mmj]

Also, it depends on whether the server is sending out validators with the image...

It the server sends out an Expires: or Cache-Control: line in the header, it tells the proxy or browser cache exactly how long the cached image is valid.

Most modern browsers will, if they received no validator, keep the image in the cache for one browser session only. [note: this applies to IE even when you have it set to NEVER]

Here's a handy tool to see what headers your server is sending out with the image. Put the IMAGE's url.

http://www.delorie.com/web/headers.html

[lynlimz]

Nice resource mmj.
Ha! It would do good for me to have some server administration I guess....=)

[spaceman]

Originally posted by mmj
Also, it depends on whether the server is sending out validators with the image...

It the server sends out an Expires: or Cache-Control: line in the header, it tells the proxy or browser cache exactly how long the cached image is valid.

Most modern browsers will, if they received no validator, keep the image in the cache for one browser session only. [note: this applies to IE even when you have it set to NEVER]

Here's a handy tool to see what headers your server is sending out with the image. Put the IMAGE's url.

http://www.delorie.com/web/headers.html

Hi mmj,

Do you know a reliable way for browsers NOT to cache images? I'm using an image upload routine from a form (with help from PHP), but when the upload completes, the old image is displayed instead of the one I just replaced it with - until I click refresh/reload.

I thought that these good old meta tags should work:

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">

I've even put them in the header AND footer of my HTML page as recommended here:
http://htmlgoodies.earthweb.com/beyond/nocache.html

...but still my old image insists on being displayed until I click refresh. Any suggestions?

Thanks.