chadtmiller.com/knotless
git that lives in your Atmosphere account
1
10
Avatars drawn small load Bluesky's thumbnail, not the full picture
Merged Approved
The Avatar atom now rewrites Bluesky CDN img/avatar/ URLs to img/avatar_thumbnail/ for every size except xl. The regex is anchored and leaves other hosts alone, and $derived keeps it reactive to src. The change is small and correct, and I found nothing that blocks it.
One note: the thumbnail is 128px, and the lg avatar is drawn at 88px (per the PR body). On a 2x display that needs about 176px, so the settings header avatar will look slightly soft. If that matters, let lg keep the full size or use a larger variant. 20 and 32px are fine up to 3x.
web/src/lib/atoms/Avatar.svelteline 24
let cls = $derived(size ? `av ${size}` : 'av'); | |
const seed = $derived(did ?? name); | |
/** The thumbnail wherever it is drawn small: a twentieth of the bytes. */ | |
const shown = $derived(size === 'xl' ? src : src?.replace(BLUESKY_AVATAR, THUMBNAIL)); |
lg (88px) on a 2x screen wants ~176px, more than the 128px thumbnail gives. Consider excluding lg too if the settings header looks soft.
All checks have passed
8 passed, 2 skipped
Merged as a89e367
What changes
An avatar drawn small on the pages (20, 32 and 88px: rows, lists, menus, the settings header) now loads Bluesky's CDN thumbnail (
img/avatar_thumbnail/, 128px, about 4 KB) instead of the full picture (img/avatar/, 80 to 165 KB). Only the profile's own avatar, drawn up to 160px, keeps the full size. The change is in theAvataratom, which every avatar on the pages is drawn by. Answers from knotless-serve are unchanged, so the iOS app and the CLI see the same URLs as before.Why
Lighthouse on prod flagged avatars as the largest waste on every page it ran: 76 to 236 KB per page for pictures drawn at 20 to 40px. The social cards already fetch the thumbnail for the same reason. Doing it in the atom, rather than in the views serve answers, keeps a large picture available where one is drawn large, on the web and in the app.
How it was checked
Fetched one avatar both ways from the CDN: 78,420 bytes in full, 4,195 bytes as a thumbnail, 128px across. The shot fixtures hold no CDN avatars, so no page's pictures should move.
webruns svelte-check.Shortcomings
Avatars not on Bluesky's CDN (an account's own, from
getAvatar) are left as they are.🤖 Generated with Claude Code