fofos/fofos-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

poster rung at 448, for the density-capped hero

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
pastilhas
2026-08-30 00:30:21 +01:00
co-authored by Claude Opus 5
parent 70dc19500a
commit fbf45a12fd
1 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
api/derive.ts
+6 -3
View File
@@ -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: * 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 1 = 412 -> 448 (a phone, at the density the hero is CAPPED to — see below)
* 412 x 3 = 1236 -> 1280 (a dense phone, from the full-size poster)
* 768 x 1 = 768 -> 768 (a tablet) * 768 x 1 = 768 -> 768 (a tablet)
* 1280 x 1 = 1280 -> 1280 (a desktop) * 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 * `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 * placeholder is cut from it, the site falls back to it, and a directory built before this has only
* that one. * 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. * WebP quality, by rung.