Does control always retrieve same image from server?

Question

I have a bound image element inside dataview control . on click event it fetch data from database.
I read that images are saved on browser and do not require multiple downloads from server.
If so, i am curious to find out whether my images are stored on browser or every time i select image it repeats round trip to server?
How can i find out from browser ?

Answer 1

Hi @peter liles ,

I read that images are saved on browser and do not require multiple downloads from server.

Yes, there is a cache in the browser to save browsed/loaded resource files.

If so, i am curious to find out whether my images are stored on browser or every time i select image it repeats round trip to server?
How can i find out from browser ?

If you have enabled cache in browser(by default), the image resource may have one of the following two response states after request postback:

1. 200 (from memory cache) -> The image is loaded directly from the browser cache, and the resource is stored locally and not expired yet.
2. 304 Not Modified -> The response of the server after the browser has checked if a file was modified since the last version it had cached.

You can open the devtools in browser via F12 to check its response status. Something like this:

   <asp:Image runat="server" ID="testImage" ImageUrl="~/images/simple.png" />  

If you disable the cache(mark in blue in the first screenshot), then these resources will be loaded from server.

Best regards,
Xudong Peng

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Thanks that was informative. I tested for two separate webpage examples and discovered the following

First
loads images into a datalist using sqldatasource and when item selected loads enlarged image into a Image element from code behind.
the STATUS CODE 200 OK (from memory cache) for all returned datalist and subsequent selected images.

Second
loads images into a datalist using sqldatasource and when item selected loads enlarged image into a detailsview that retrieves image from serverside imageurl handler.ashx file.
the STATUS CODE 200 OK(from memory cache) for all returned datalist images.
After image each image selected from datalist the request displays ImageHandler.ashx?ImageID=number for each request and
STATUS CODE 200 OK
In response headers section: Cache-Control: no-cache

It does appear that the detailsview control does not cache images unlike the First page example instead completes a round trip to the server on every request?

Answer 3

Caches are a specialist subject !
the network in developer tools doesn't appear the right tool to show what happens and application is not enabled?
i gather memory cache unrelated to the browser cache which has a number of options. i could not determine if browser cache is being utilized. Only when a resource is not listed i presume because no response from network server so image is taken from browser cache instead? and no-cache according to explanation refers to verification and not what is says!

How do you set the settings of those directives in the page: Cache-Control: Private

I think it is best practice to leave them as default settings ?
And there are many topics on the subject. i have a page that stores images in local storage and retrieves them if exists but i don't imagine it is necessary when you can store them in browser and memory cache instead?
Another thought is messing around with page caching now recommended when PanelUpdate is available to improve page performance?

Answer 4

there are articles regarding performance issues when loading images. I am of the understanding that browser cache is adequate enough?

Answer 5

I forgot to ask about style theme folder files and external javascript files. I read that these files are cached ? that explains why nothing was updated on page when i updated code in these files. What may i do to overcome this problem. Is it like the above example where you set the response header in page to nocache? i had seen an example in the explanation files provided but they do not make sense, as they mention adding a version number to the file path.
If i did that then the external file location would not be found?