Why Does Your Browser Still Cache Images with ‘no‑cache’? Uncover HTTP Caching Secrets

Introduction

HTTP caching is a crucial web performance optimization technique that every web developer should master. The author presents two practical questions about caching headers to illustrate common misunderstandings.

HTTP Caching System

The caching mechanism is divided into three parts:

1. Cache Storage Strategy

Determines whether a response can be stored by the client and which clients may store it. Headers such as public , private , no-cache , max-age , and no-store belong to this strategy.

public allows storage, but the browser still needs an expiration mechanism to know if the cached data is still valid.

2. Cache Expiration Strategy

Defines how the client decides if locally cached data has expired. The Expires header provides an absolute expiration time, while Cache‑Control: max-age and no‑cache act as overrides with higher priority.

When both Expires and Cache‑Control are present, Cache‑Control wins.

3. Cache Validation Strategy

When cached data is considered stale, the client sends conditional requests using If-Modified-Since or If-None-Match . If the server deems the data still valid, it returns 304 Not Modified, allowing the client to reuse the local copy.

Question 1 Analysis

HTTP/1.1 200 OK
Cache-Control: no-cache
Content-Type: image/png
Last-Modified: Tue, 08 Nov 2016 06:59:00 GMT
Date: Thu, 10 Nov 2016 02:48:50 GMT
Content-Length: 3534

The response contains Cache‑Control: no-cache and Last‑Modified . no‑cache is equivalent to max-age=0, meaning the resource is stored locally but must be revalidated on each request. The browser will send a conditional request; if the server returns 200 the cache is refreshed, otherwise a 304 allows reuse.

Question 2 Analysis

HTTP/1.1 200 OK
Cache-Control: private
Content-Type: image/png
Last-Modified: Tue, 08 Nov 2016 06:59:00 GMT
Date: Thu, 10 Nov 2016 02:48:50 GMT
Content-Length: 3534

With Cache‑Control: private and no explicit expiration, browsers fall back to a heuristic: they compute 10% of the time difference between Date and Last‑Modified and use that as the cache lifetime.

HTTP/1.1 Cache-Control Header is present: private
HTTP Last-Modified Header is present: Tue, 08 Nov 2016 06:59:00 GMT
Heuristic expiration policies suggest defaulting to: 10% of the delta between Last-Modified and Date.
That's '05:15:02' so this response will heuristically expire 2016/11/11 0:46:01.

During the heuristic period the browser serves the image from its local cache without contacting the server; after expiration it revalidates using If-Modified-Since .

Conclusion

HTTP caching is not complicated but is often overlooked. By dissecting the three caching dimensions—storage, expiration, and validation—and understanding how each header contributes, developers can accurately predict caching behavior and configure headers to achieve the desired performance outcomes.