Image cache not working with Firefox and apex

Question

Hi,
I'd like to cache all my images to save page rendering time and bandwidth because my images are all static and never change.
I use the John Scott's caching technique Link: [http://jes.blogs.shellprompt.net/2007/05/18/apex-delivering-pages-in-3-seconds-or-less/], in a few words this technique consists of adding a header line "Expires: date in the future" in the http response.
It works very well in IE, the images are cached and the same image can be accessed several times (within the same session or in different sessions) without issuing an http request to the server each time.
with Firefox it does not work, the same image is asked again and again to the server (i'm using FF 3.5 and APEX 3.2).
- Is it a date format problem? no, because when i type about:cache in FF, i can find my image in the cache with an expire date in the future.
The weird thing here is that the counter is incremented each time u request the image, so FF knows it is in the cache and even if the expire date is in the future, FF asks it again to the server.
- Is it a FF bug? If u read the http specs or if u google a little, u can come to the conclusion that FF does not follow the standards,
but... images.google.com for example manages to get its images cached with FF.
They use an http response header "cache-control: public, max-age=604800".
I tried the same and all kinds of combinations but without success.
When i compare my image with the one from google in the FF cache, they both have the same attributes.
- It's not an apex issue neither because it works with IE, most probably an incompatibility between apex and FF?
Maybe the use of cookie? or the http request (not the response) containing "cache-control: max-age=0"?
I've found so far 2 half solutions:
1) use ETag and modified date, see the Tyler Muth's note Link: [http://tylermuth.wordpress.com/2008/02/04/image-caching-in-plsql-applications/].
with this technique FF continues to send request each time but the answer is shorter because it's just a "304 not modified" instead of "200 OK" (200 response is bigger as it contains the image).
it's better than nothing but you still have 1 request + 1 response for nothing.
Another problem is that you need SYS access to implement this, which is not possible on an hosted server. (note that for images from the file system it is already foreseen by apex 3.1, Tyler's note is for images from the db)
2) if you preload the image (using myimage=new Image();myimage.src='...';), then there is max 1 request per browser session.
There are 2 minor issues here:
- no caching across sessions
- if u don't want to preload all the images (example a page with lots of thumbnails, when user clicks it show a bigger image, in that case the thumbnails can be preloaded but overkill for the big images), then you need to load the image, wait until the image has loaded before displaying it, it does not slow down the execution, but requires some extra JS.
I'm not asking anyone to investigate it, i can live with the 2 workarounds,
but just in case someone encountered the same problem and already fixed it.
Let me know if u managed to use the John Scott's technique with Firefox. (U can use Firebug to see the http traffic)
Thx
Tim

Answer 1

Hi Anshul, hope these help. Let me know if you need to see anything else.
Best,
Menu Settings:
Tab Hyperlink:
Label Text with with hyper link option not available (works as a hyperlink in chrome and IE though):
Thanks for the help in advance!