Google Chrome load image from cache slower than do

Question

I'm buiding a web app to browse big photoes on local server.

Strange thing is that the Chrome load image form cache cost too much time,even much more than download from the local server.

Each photo is about 5Mb, Chome donwload it cost about 200ms, but cost about 400ms from the cache.

Below is a screenshot:

My environment is Mac OSX 10.8.4,and I have tested it on pc- it's cost about 700ms.

Here is a test on jsfiddle.

I can't find images with such size on the web, so you might need fiddle2 or Charies to map these images to your own local images. And rewrite the header to make Chrome to cache them:

Expires:Wed, 17 Jul 2013 01:50:08 GMT
Cache-Control:max-age=604800
Connection:keep-alive
Date:Wed, 10 Jul 2013 07:33:51 GMT
Last-Modified:Wed, 10 Jul 2013 01:13:26 GMT

Answer 1

Not super useful, but my solution to this issue was to encode the images as data URI's. Duplicating the images (as I was doing) or pulling from the cache is about 10-50ms then.

If you're loading your images through AJAX you'll have to watch out for CORS concerns then, but if you're loading them server side you'll just need to figure out if you can inline them without making your page load take too long.