480 is an image rung too

The ladder went 320 then 640, and a phone lands between them. Lighthouse measured the home gallery's
slots at 454 device pixels; with only those two rungs the browser correctly took 640, which is a
184 KB file for a 454-pixel slot — and the same on every image in that carousel.

A rung is one more WebP beside files that already exist, chosen only when it fits better than its
neighbours. Not having it is paid for on every visit.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

api/derive.ts

@@ -49,8 +49,18 @@ import { mediaPath } from './media';
  * revising them for every site at once is the reason it is a separate service.
  */
 
-/** Image rungs, in pixels of width. Rungs wider than the original are skipped — see above. */
-export const LADDER = [320, 640, 960, 1280, 1920, 2560] as const;
+/**
+ * Image rungs, in pixels of width. Rungs wider than the original are skipped — see above.
+ *
+ * 480 was added on 2026-08-29 because the gap between 320 and 640 is where a phone lands. Lighthouse
+ * measured the home gallery's slots at 454 device pixels and the browser, having only those two rungs
+ * to choose from, correctly took 640 — a 184 KB file for a 454-pixel slot, and the same story on
+ * every image in that carousel.
+ *
+ * A rung is cheap: it is one more WebP beside files that already exist, chosen only when it fits
+ * better than its neighbours. The cost of NOT having one is paid on every visit.
+ */
+export const LADDER = [320, 480, 640, 960, 1280, 1920, 2560] as const;
 
 /** WebP quality. 82 is the usual knee: visually clean on photographs, well off the top of the curve. */
 const WEBP_QUALITY = 82;