the ladder reaches down to 96

160 was still not a floor. A logo renders at 80 CSS pixels, which is 140 device pixels on an ordinary
phone and 80 on a plain one, and the smallest rung being 160 meant the plain screen had nothing to
take but the retina file.

96 and 128 cost a few hundred bytes each and only exist for things this small — a logo, an icon, an
avatar. Every photograph in the library skips them, because nothing is ever upscaled and a rung wider
than the source is not written.

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

api/derive.ts

@@ -52,8 +52,9 @@ import { mediaPath } from './media';
 /**
  * Image rungs, in pixels of width. Rungs wider than the original are skipped — see above.
  *
- * 160 and 256 are the FLOOR, added because there was none. A logo renders at 80 CSS pixels and the
- * smallest rung was 320, so the whole ladder had nothing to offer it: `fofos-logo-black` came out with
+ * 96, 128, 160 and 256 are the FLOOR, added because there was none. A logo renders at 80 CSS pixels
+ * — 140 device pixels on an ordinary phone — and the
+ * smallest rung was 320, so the ladder had nothing to offer it: `fofos-logo-black` came out with
  * one 12,350-byte rung against a 12,678-byte original, a ladder that saved 328 bytes. Anything shown
  * smaller than a thumbnail — a logo, an icon, an avatar — lives down here.
  *
@@ -65,7 +66,7 @@ import { mediaPath } from './media';
  * 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 = [160, 256, 320, 480, 640, 960, 1280, 1920, 2560] as const;
+export const LADDER = [96, 128, 160, 256, 320, 480, 640, 960, 1280, 1920, 2560] as const;
 
 /**
  * Square rungs, cropped rather than scaled — `320sq.webp`, and so on.