From 94eb308e78f57f80cfccfbaeebe43921b30cf94f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Padez?= Date: Sat, 29 Aug 2026 23:46:41 +0100 Subject: [PATCH] 480 is an image rung too MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- api/derive.ts | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) 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;