Wirebook › Bonus lesson

Why does the website still show the old picture?

Bonus lesson · about 6 minutes · hands-on · nothing you type leaves your browser

A website updates its picture, but your browser keeps showing the old one. Is the site broken — or is your browser still looking at a saved copy it made earlier? Here you can compare the server’s picture with the one on your shelf, and learn when soft reload, hard refresh and “not modified” replies each help.

What your browser is really doing

Browsers keep a cache: a shelf of recent files so everyday browsing does not re-download every picture. Each saved copy gets a freshness window from headers such as Cache-Control: max-age=…. While that window lasts, a soft visit can reuse the shelf without asking the server. A hard refresh skips the shelf and always downloads again.

• Fresh vs stale. Fresh means “still inside the shelf life.” Stale means “the timer ran out” — the browser should check before trusting the copy.
• Soft visit vs hard refresh. Soft reuses a fresh copy. Hard refresh (often Ctrl+Shift+R / Cmd+Shift+R) asks the network again.
• ETag / 304. A fingerprint of the file. If it still matches, the server says 304 and you keep the bytes you already have — no new download, but you know it is still current.
• Why logos stick. After a deploy, people with a long-lived cached logo see the old art until the shelf life ends, they hard-refresh, or the URL/fingerprint changes.

Try this next time a site “didn’t update”

1. Hard-refresh the page (or open it in a private window with an empty shelf).
2. If you build websites, give changing pictures a new filename or query hash so the shelf cannot reuse the old URL.
3. Use short max-age for HTML, longer for hashed assets, and ETags so revalidation stays cheap.

Grown-up twin: Tooltern’s help pages on old CSS after a deploy, 304 Not Modified and no-cache vs no-store show the same ideas with real headers and curl commands.