From fbf45a12fd254682362607c49d94f4cd3fe79d34 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Padez?= Date: Sun, 30 Aug 2026 00:30:21 +0100 Subject: [PATCH] poster rung at 448, for the density-capped hero The hero declares a sizes well under its real width on phones so the browser stops multiplying by the pixel ratio and asks for roughly one image pixel per screen pixel. 448 is the rung that lands on a 412-wide phone once that cap applies; without it the nearest was 512. Co-Authored-By: Claude Opus 5 (1M context) --- api/derive.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/api/derive.ts b/api/derive.ts index 53e4864..5e6a0f1 100644 --- a/api/derive.ts +++ b/api/derive.ts @@ -118,16 +118,19 @@ export const SQUARE_LADDER = [256, 384, 480, 640, 960] as const; * * A hero is full-bleed, so the widths are viewport widths times the density behind them: * - * 412 x 1.75 = 721 -> 768 (the emulated phone, and most of the real ones) - * 412 x 3 = 1236 -> 1280 (a dense phone, from the full-size poster) + * 412 x 1 = 412 -> 448 (a phone, at the density the hero is CAPPED to — see below) * 768 x 1 = 768 -> 768 (a tablet) * 1280 x 1 = 1280 -> 1280 (a desktop) * + * The hero declares a `sizes` well under its real width on phones, deliberately, so the browser stops + * multiplying by the device pixel ratio and asks for roughly one image pixel per screen pixel. 448 is + * the rung that lands on a 412-wide phone once that cap is applied. Without it the nearest was 512. + * * `poster.webp` keeps its name and stays the widest rung. Everything already refers to it — the * placeholder is cut from it, the site falls back to it, and a directory built before this has only * that one. */ -export const POSTER_LADDER = [384, 512, 768, 1024] as const; +export const POSTER_LADDER = [448, 512, 768, 1024] as const; /** * WebP quality, by rung.