coffee, black   no sugar

Experimenting with my new site design, I wondered how the browsers were caching my picture swapping code in the header. Firefox looked well enough, but IE6 seemed to be reloading pictures from the server which is definitely not what i wanted it to do. As a quick fix, I disabled the animation for IE6, but now it's time to look a bit deeper.

Setup

I tested against my personal site and my javascript code is setting image urls to resources beneath http://www.eissing.org/scenery. The answers from the server looks like this:

HTTP/1.1 200 OK
Date: Sun, 28 May 2006 07:59:35 GMT
Server: Apache/2.0.55 (Unix) mod_ssl/2.0.55 OpenSSL/0.9.7b DAV/2 mod_jk/1.2.15
Last-Modified: Sat, 27 May 2006 10:39:15 GMT
ETag: "2dc4f4-1a191-b2557ac0"
Accept-Ranges: bytes
Content-Length: 106897
Content-Type: image/png

As one can see Etag and Last-Modified are there, but no cache controls or Expires header. This is the out-of-the-box apache setup when serving files from the filesystem.

Tests

Firefox (1.5.0.3)

Firefox is switching images without sending any requests to the server - for a time. An image it has loaded more than 2-3 minutes ago it rechecked. Not having seen the actual request headers, it seems it uses some sort of If-* headers since the server responds with a 304. This is fine.

IE6 (6.0.2900.2180...)

IE never revalidates loaded pictures (I have the "check pages" setting on "automatic" which is the factory default). This is fine in my case. However I stumbled upon the following nastiness:
One of my scenery pictures is quite large and IE seems to be particularly slow at loading PNG formats. So, before this one large picture was completely converted, the javascript code on the page fired again and IE dropped what it was doing immediately. So, next time this particular pictures URL is set, it starts the whole process all over again. Bad. I increased the time between events and IE was happy with that and is not loading this image over and over.
However the loading time is not under my control! If a viewer has a slow machine or a slow network connection, it will happen again. It seems that a resource is inserted into the browser cache, when everything else is done, not immediately when received from the network. So, I disable the image switching for IE.

Safari (2.0.3)

Exhibits the same behavior as Firefox. Revalidates after 2-3 minutes and gets a 304.

Opera (8.54)

Loads everything fine. Does not seem to revalidate.

Camino (1.0.1int)

Same behavior as Firefox which is not surprising since it uses the same engine.

Summary

All browsers except IE6 do fine on this image switching of mine. Since the pictures do not change on the fly, the non-revalidation of Opera and IE is not a problem. Applications with different needs will most likely have to use some Cache-Control/Expire combination to make it work.

Technorati Tags: browser, cache, web