diff --git a/api/derive.ts b/api/derive.ts
index 4142ff9..03653b7 100644
--- a/api/derive.ts
+++ b/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;