Notater fra teamet om håndverket, formater og de små valgene bak en god sirkelbeskjæring.
Hvordan det runde utklippet blir til
Glem tanken om at sirkelen er et avrundet hjørne fra CSS, for det er den ikke. Mens du drar, henger en levende sirkel med håndtakene dine, og hele motivet ligger synlig under en mørk ring hele veien. Selve kuttet skjer i det du trykker lagre: bildet tegnes opp i den størrelsen du har valgt, og alt som stikker utenfor sirkelkanten faller bort. Har du valgt PNG, WebP eller AVIF, beholdes en gjennomsiktig alfaring rundt utklippet. Velger du JPEG i stedet, som ikke kjenner alfa, males den ringen med en farge du har plukket, og det skjer før filen i det hele tatt er ferdig bygd. Verken kutt eller bygging tar veien om en tjener, alt blir til lokalt.
Forskjellen på PNG, WebP, AVIF og JPEG
Valget av format avgjør hva slags fil du sitter igjen med. Raskest er JPEG, rundt 400 ms på en datamaskin, men det mangler gjennomsiktighet og passer derfor bare der gjennomsiktige filer blir avvist, som hos enkelte Slack-koblinger og e-postklienter. AVIF ligger i motsatt ende og er tregest å bygge, fra noen sekunder på en PC til nærmere 30 på en midtklassetelefon for en kilde på 8 megapiksler, men til gjengjeld klemmer AV1 filen 40 til 50 prosent under en WebP ved liknende kvalitet. WebP selv lander 25 til 40 prosent lettere enn PNG på trinn 85 til 90 og leses i alle nettlesere fra 2023. PNG er tapsfri og forstås overalt, og et utklipp på 512 ganger 512 fra en kilde på 8 megapiksler havner gjerne mellom 180 og 350 KB alt etter hvor mye detaljer det er. For de fleste holder det med PNG eller WebP.
Mål på runde avatarer tjeneste for tjeneste
Inne i sirkelmasken er det ingen felles standard, hver tjeneste har sine egne mål. Slack er beskjeden i kanallisten, omtrent 36 px, selv om du gjerne laster opp helt opp til 512 ganger 512. Discord deler det i to, 32 ganger 32 i praten og 128 ganger 128 i listene, mens serverikonet får stå på 512 ganger 512. Instagram holder seg rundt 110 px i mobilprofilen og faller til 32 px i miniatyrene. Størst krav stiller LinkedIn, som vil ha minst 400 ganger 400 px og viser bildet rundt på profilen og nær 48 px i strømmen. Ettersom utklippet arver oppløsningen fra kilden, er turen innom /resize/ verdt det når et bestemt utgangsmål må treffes på pikselen, ellers risikerer du at en oppskalering gjør resultatet uskarpt.
HEIC og hvorfor bare Safari leser det
Møter du en lesefeil på en HEIC-fil, er forklaringen at Chrome, Firefox og Edge fremdeles ikke åpner formatet i 2026. HEIC bygger på HEVC og er Apples eget bildeformat, og blant nettleserne er det bare Safari 17 og nyere som leser det direkte, så der går sirkelutklippet av et iPhone-bilde rett gjennom uten et mellomsteg. Siden verktøyet gransker de faktiske signaturbytene idet du laster opp, hjelper det ikke å døpe om en .heic til .jpg, for kontrollen avslører det uansett. Er du ikke i Safari, er veien rundt enkel nok: del bildet som JPG fra Bilder-appen på iPhone, eller send en fil du allerede har på maskinen gjennom /heic-to-jpg/ først.
Derfor er alt utenfor sirkelen gjennomsiktig
Hver piksel utenfor sirkelen får alfaverdien 0 når du eksporterer til PNG eller WebP, og det betyr full gjennomsiktighet. Praktisk sett skinner bakgrunnen til tjenesten rent gjennom så snart avataren rammes inn rundt, og selve gjennomsiktigheten blir usynlig. Først når du åpner den samme filen i full størrelse, for eksempel i en vedleggsvisning, røper det tomme området seg som et rutemønster. Slipper du utklippet inn i Figma eller Canva, legger det seg pent over hvilken som helst farge uten en hvit kantstripe. Noen e-postklienter, CMS-opplastere og eldre tjenester takler derimot ikke alfa og maler det gjennomsiktige svart, og nettopp for slike tilfeller finnes JPEG med en fast fyllfarge som omgår problemet.
Sjekk i DevTools at alt skjer i nettleseren
Du trenger ikke stole på påstanden om at ingenting lastes opp, du kan se det med egne øyne. Høyreklikk og velg Inspiser, eller bare trykk F12, gå til fanen Nettverk og tøm den. Last så opp et bilde i verktøyet og dra litt i håndtakene mens du følger med. Det eneste som dukker opp, er ressursene som bygger selve siden, altså JS, CSS og fonter, og de ble hentet allerede før du valgte fil. Du finner aldri en POST eller PUT som bærer bildedataene dine. Når du lagrer, glimter riktignok en kort blob:-forespørsel til, men det er bare nettleseren som leverer den lokale filen tilbake til deg, ikke noe som sendes ut. Bildet av dette er det samme enten du sitter i Chrome, Firefox, Safari eller Edge.
