From 82cd8da7f5ab285b3a91f7284fb8d845400012ca Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Thu, 10 Sep 2026 22:51:56 -0700 Subject: Ship the punks at the size we actually draw them. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The art is 240x240 (20KB each, 1.5MB for the set) because that's what a punk published as someone's nostr picture should be — but the circles the app draws are 18 to 64px, so a new wallet with nothing cached was fetching eight times the pixels it could show, one request per face. punks-sm carries a 128px copy of each: 4KB instead of 20KB, indistinguishable at 64px. Small circles and the wizard's picker tiles load those; only the 64px profile avatar and the value the wizard publishes stay full-size. The bigger win is that a punk picture is our own art wherever it turns up. Everyone who keeps the default publishes v3.coinos.io/punks/N.webp as their nostr picture, so those faces now paint straight off disk at the size being drawn — no request, no thumbnail to make, and no broken circle when the legacy coinos.io copies 502 (which they do for a third of the set). Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_019mrt228Upn9nNCwGixzSLx --- src/app.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'src/app.js') diff --git a/src/app.js b/src/app.js index f36c9bc..19258c3 100644 --- a/src/app.js +++ b/src/app.js @@ -2904,7 +2904,11 @@ function shouldOnboard() { } const PUNK_PICKS = [7, 14, 21, 3, 33, 40, 47, 36, 61, 26, 12, 50]; +// The value the wizard publishes is always the full-size art — that URL +// becomes this person's picture on every nostr client. The tiles in the +// picker are 56px, so they load the small copies. const punkImg = (n) => `punks/${n}.webp`; +const punkTile = (n) => `punks-sm/${n}.webp`; async function onbUpload(file) { const fd = new FormData(); @@ -3106,7 +3110,7 @@ function onboardScreen() { ...PUNK_PICKS.map((n) => h('img', { class: 'onb-punk' + (sel === punkImg(n) ? ' sel' : ''), - src: punkImg(n), alt: '', + src: punkTile(n), alt: '', onClick: () => { o.avatar = punkImg(n); render(); }, onError: (e) => { e.target.remove(); }, // a 502'd punk removes itself }))), -- cgit v1.2.3