title: Why does Chrome make a request for already cached image with max-age header?
body: <p>My goal is to cache images in browser's cache.</p>
  
  <h1>Current setup</h1>
  
  <p><code>Cache-Control: public, max-age=10368000</code> header is attached to the requested image to cache the image.</p>
  
  <p>Furthermore, <code>ETag: f5f9f1fb39790a06c5b93735ac6e2397</code> header is attached too to check if image has changed once <code>max-age</code> is reached.</p>
  
  <p>When the same image is requested again, <code>if-none-match</code> header's value is checked to see if image has changed. If it has not, <code>304</code> is returned.</p>
  
  <p>I am using Fiddler to inspect http traffic (note - behaviour described below was happening already before Fiddler, so it is not the problem)</p>
  
  <p>Chrome version - 77.0.3865.90 (Official Build) (64-bit)</p>
  
  <h1>Expected behaviour</h1>
  
  <p>I expect that the image would get cached 10368000 seconds. Unless 10368000 seconds have passed, image gets served from browser's cache on each request. Once 10368000 seconds have passed, request is made to the server which checks Etag. If the image has not changed on the server, return 304 to the client and extend caching period to another 10368000 seconds.</p>
  
  <h2>Behaviour with Google Chrome</h2>
  
  <ol>
  <li>Image gets requested for the first time. Below are the request headers</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/XP7ic.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XP7ic.png" alt="enter image description here"></a></p>
  
  <ol start="2">
  <li>Image is returned successfully with 200 status. Below are the response headers</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/FpLj4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FpLj4.png" alt="enter image description here"></a></p>
  
  <p>Fiddler tells that an image was requested and served</p>
  
  <p><a href="https://i.stack.imgur.com/02J0m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/02J0m.png" alt="enter image description here"></a></p>
  
  <p>Furthermore, the fact that the image is cached is seen in <code>~/Library/Caches/Google/Chrome</code> as it appears there.</p>
  
  <ol start="3">
  <li>I <strong>click on the link bar in browser and press Enter</strong> to request the image again. Below are the request headers</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/jJoza.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jJoza.png" alt="enter image description here"></a></p>
  
  <ol start="4">
  <li>Image is returned successfully with 304 status. Below are the response headers</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/u2HuJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/u2HuJ.png" alt="enter image description here"></a></p>
  
  <p>Fiddler tells that image was served from the cache</p>
  
  <p><a href="https://i.stack.imgur.com/s9tw2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/s9tw2.png" alt="enter image description here"></a></p>
  
  <p>Why did Chrome make an additional request for the image and served it from the cache only after it received 304 response?</p>
  
  <p>I see that when requesting the image second time <code>Cache-Control: max-age=0</code> request header is set. As I understand, it means that Chrome wants to re-validate if cached image is valid before serving it. But why?</p>
  
  <p>Some people online have told that <code>Etag</code> header is the reason for Chrome making sure images are valid. Even if I do not include <code>Etag</code> header, just have <code>Cache-Control: public, max-age=10368000</code> in the first response, the <code>Cache-Control: max-age=0</code> exists in second request's headers.</p>
  
  <p>I have also tried excluding public, making it private etc. I also added <code>Expires</code> and <code>Last-Modified</code> pair with and without <code>max-age=10368000</code> and get the same behaviour.</p>
  
  <p>Furthermore, in dev tools I have NOT checked Disable cache. So the cache is enabled for sure which also makes sense because the image was served after returning 304.</p>
  
  <p>This exact behaviour happens also when, instead of clicking link bar and pressing Enter, I press Refresh arrow aka CMD + R. If I do hard refresh CMD + SHIFT + R, then the image is requested as if it is first time requesting it, which makes sense.</p>
  
  <h2>Behaviour with Firefox</h2>
  
  <p>Firefox works exactly as expected.</p>
  
  <ol>
  <li>Image gets requested for the first time. Below are the request headers</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/z7bVg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/z7bVg.png" alt="enter image description here"></a></p>
  
  <ol start="2">
  <li>Image is returned successfully with 200 status. Below are the response headers</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/kzwVm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kzwVm.png" alt="enter image description here"></a></p>
  
  <p>Fiddler tells that an image was requested and served</p>
  
  <p><a href="https://i.stack.imgur.com/wsap9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wsap9.png" alt="enter image description here"></a></p>
  
  <p>Furthermore, if I hover over response status, then it says OK</p>
  
  <p><a href="https://i.stack.imgur.com/yRscw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yRscw.png" alt="enter image description here"></a></p>
  
  <ol start="3">
  <li>I <strong>click on the link bar in browser and press Enter</strong> to request the image again. Below are the request headers</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/rp31n.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rp31n.png" alt="enter image description here"></a></p>
  
  <ol start="4">
  <li>Image is returned successfully with 200 status. Below are the response headers</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/gd5ey.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gd5ey.png" alt="enter image description here"></a></p>
  
  <p><strong>BUT Firefox shows that it was cached.</strong></p>
  
  <p><a href="https://i.stack.imgur.com/cXWZ2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cXWZ2.png" alt="enter image description here"></a></p>
  
  <p><strong>FURTHERMORE, Fiddler detected no activity</strong> on the second request, so the image was served from Firefox's cache. Unlike Chrome, which made another request to the server just to receive 304 from it.</p>
  
  <p>Thank you very much for your time and help. I highly appreciate it and am open to provide any other information. Really looking forward to what you think about this.</p>
  
  <p>Have a nice day :)</p>