From 5481005ccf289b9a855a7f4ed3f7b7b4a33d5365 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Padez?= Date: Sun, 30 Aug 2026 09:51:38 +0100 Subject: [PATCH] the ladder reaches down to 96 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- api/derive.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/api/derive.ts b/api/derive.ts index 6ab3e45..82b848e 100644 --- a/api/derive.ts +++ b/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.