browser - How to check whether the images are from cache

Question

How to check whether the images are from cache or from server. Since my home page contains 45 images. When I press F5, want to know whether the images are from cache or from server.

I had added <%@ OutputCache Duration='120' Location='Client' VaryByParam='none' %>

Answer 1

New visitors will of course not have any cached images, while they also want your site to load fast. If you're testing how well your site performs for them, then simply clear your cache?

If it is just for debugging:

• Safari has a Developer menu, which can be enabled through the preferences. Here, the Resources tab in the Web Inspector will show 0 ms when something is loaded from cache. Viewing the details, you'll see that the request header is missing in those cases (though the old response header can still be viewed).
• Using Firefox with the Live HTTP Headers add-on will show you exactly what is requested from the server. If it is not requested, then it was loaded from the cache. (In that case, nothing is requested, not even using a If-Modified-Since header.)
• Firefox with the Firebug add-on installed gives you the Net tab, but when that is enabled Firefox will always request all content again, even if you don't click Refresh but are just following some links (thus always using a If-Modified-Since header, see below). This will still show you "Not Modified" though. Some lite version of Firebug is also available for Internet Explorer.

Note that hitting F5/Refresh will make most browsers always ask the server if something has changed for the content which the browser already cached, even if it knows that the cache should still be valid. The request will then include a If-Modified-Since header. If the server says it's not modified, then the cache is used. Like:

GET /ga.js HTTP/1.1  
Host: www.google-analytics.com  
...  
If-Modified-Since: Mon, 22 Jun 2009 20:00:33 GMT  
Cache-Control: max-age=0  

HTTP/1.x 304 Not Modified  
Last-Modified: Mon, 22 Jun 2009 20:00:33 GMT  
Date: Sun, 26 Jul 2009 12:08:27 GMT  
Cache-Control: max-age=604800, public  
Server: Golfe

The above is different from just navigating a site. When clicking links, or when coming back to a page at some later time (typing the address, bookmarks, search result, ...) a browser will simply silently use the cache if it is still valid, without asking if anything has changed.

(Also note that a proxy server may do some caching. In the above response, the public in the Cache-Control indicates that a proxy can indeed cache that specific response.)