Question

EDIT: Answer provided below.

I’ve struggled for a couple of days to understand why Mozilla Firefox continually failed to retrieve images from its’ cache as opposed to fetching new copies everytime I reloaded a page.

Google Chrome didn’t appear to have this issue, but that’s because refreshing the page in Chrome does NOT force it to reload images (unless a CTRL-F5 is used).

Below I’ve answered my own question and added some extra info that I hope will save someone else some time in getting their head around this issue.

Answer 1

Thanks kapep, good advice. Wasn’t sure how to phrase as a question – but answering my own question I can do!

First of all to ensure an image IS cacheable you must inspect the Response Headers to ensure the following headers are set to valid values:

• ‘Cache-Control’ is set to private or public.
• ‘Expires’ is a date in the correct format that is in the future. (eg. Thu, 21 Jun 2012 06:20:49 GMT)
• ‘Last-Modified’ is not more recent than the ‘Date’ header.
• ‘Content-Disposition’ is not set to “attachment;”

If you’re convinced the headers are set correctly and it still seems like the images aren’t arriving from the cache, ensure the following:

• You are NOT F5 refreshing the page to check for caching as firefox will fetch new copies of the images if you refresh. Ensure you are reloading your page by navigating to another page and re-visiting the same page (as would be normal behaviour by one of your users).
• In your about:config (just type this in your address bar to access hidden settings) browser.cache.memory.enable = true and browser.cache.disk.enable = true