Why browsers fetch images again after reloading my page?

I am developing a web app, and I want all the images (a couple hundred MB worth - 20 000 - 50 000 thumbnails) to be downloaded once and never downloaded again, as those don't really change. Also, those images are downloaded from youtube servers, and I don't want to hammer their servers unnecessarily.

But the problem is that, when I reload the page, the requests start raining again, instead of loading the cached images. This happens when I navigate to my page and when I reload it, but when I open another page and press back the images are loaded from the cache. When I dynamically add new content with JavaScript the images are loaded from the cache as well.

So, what am I missing? I am using XAMPP server on windows 10 to test.

P.S. I am reloading with the reload button near the address bar, not with Ctrl+R or other key combination that cleans the cache.

P.P.S. To clarify before someone comments on that, I am not downloading all those thousands of images at once

Solution 1:

Since the HTTP Response caching headers specify a Max-Age of 86400 seconds (one day), the browsers will fetch the images when they expire.

You need to increase the Max-Age to get them cached indefinitely.