Noter fra teamet om håndværk, formater og de små beslutninger bag en god rund beskæring.
Hvordan det runde udsnit bliver til
Glem tanken om, at cirklen er et afrundet hjørne fra CSS, for det er den ikke. Mens du trækker, følger en levende cirkel dine håndtag, og hele motivet ligger synligt under en mørk ring hele vejen. Selve klippet sker, i det du trykker gem: billedet tegnes op i den størrelse, du har valgt, og alt, der stikker uden for cirkelkanten, falder bort. Har du valgt PNG, WebP eller AVIF, beholdes en gennemsigtig alfaring omkring udsnittet. Vælger du JPEG i stedet, som ikke kender alfa, males den ring med en farve, du har plukket, og det sker, før filen overhovedet er bygget færdig. Hverken klip eller bygning tager vejen om en server, alt bliver til lokalt.
Forskellen på PNG, WebP, AVIF og JPEG
Valget af format afgør, hvilken fil du sidder tilbage med. Hurtigst er JPEG, omkring 400 ms på en computer, men det mangler gennemsigtighed og passer derfor kun der, hvor gennemsigtige filer bliver afvist, som hos visse Slack-integrationer og e-mailklienter. AVIF ligger i den modsatte ende og er langsomst at bygge, fra nogle sekunder på en pc til nærmere 30 på en mellemklassetelefon for en kilde på 8 megapixel, men til gengæld klemmer AV1 filen 40 til 50 procent under en WebP ved lignende kvalitet. WebP selv lander 25 til 40 procent lettere end PNG på niveau 85 til 90 og læses i alle browsere fra 2023. PNG er tabsfri og forstås overalt, og et udsnit på 512 gange 512 fra en kilde på 8 megapixel havner gerne mellem 180 og 350 KB alt efter, hvor mange detaljer der er. For de fleste rækker PNG eller WebP.
Mål på runde avatarer tjeneste for tjeneste
Inde i cirkelmasken er der ingen fælles standard, hver tjeneste har sine egne mål. Slack er beskeden i kanallisten, omkring 36 px, selv om du gerne uploader helt op til 512 gange 512. Discord deler det i to, 32 gange 32 i chatten og 128 gange 128 i listerne, mens serverikonet får lov at stå på 512 gange 512. Instagram holder sig rundt 110 px i mobilprofilen og falder til 32 px i miniaturerne. Størst krav stiller LinkedIn, som vil have mindst 400 gange 400 px og viser billedet rundt på profilen og nær 48 px i feedet. Da udsnittet arver opløsningen fra kilden, er turen om /resize/ det værd, når et bestemt udgangsmål skal rammes på pixlen, ellers risikerer du, at en opskalering gør resultatet sløret.
HEIC og hvorfor kun Safari læser det
Møder du en læsefejl på en HEIC-fil, er forklaringen, at Chrome, Firefox og Edge stadig ikke åbner formatet i 2026. HEIC bygger på HEVC og er Apples eget billedformat, og blandt browserne er det kun Safari 17 og nyere, der læser det direkte, så der går cirkeludsnittet af et iPhone-billede lige igennem uden et mellemtrin. Da værktøjet gransker de faktiske signaturbytes, i det du uploader, hjælper det ikke at omdøbe en .heic til .jpg, for kontrollen afslører det alligevel. Er du ikke i Safari, er vejen udenom nem nok: del billedet som JPG fra Billeder-appen på iPhone, eller send en fil, du allerede har på maskinen, gennem /heic-to-jpg/ først.
Derfor er alt uden for cirklen gennemsigtigt
Hver pixel uden for cirklen får alfaværdien 0, når du eksporterer til PNG eller WebP, og det betyder fuld gennemsigtighed. I praksis skinner tjenestens baggrund rent igennem, så snart avataren rammes ind rundt, og selve gennemsigtigheden bliver usynlig. Først når du åbner den samme fil i fuld størrelse, for eksempel i en visning af en vedhæftning, røber det tomme område sig som et ternet mønster. Slipper du udsnittet ind i Figma eller Canva, lægger det sig pænt oven på hvilken som helst farve uden en hvid kant. Visse e-mailklienter, CMS-uploadere og ældre tjenester kan derimod ikke håndtere alfa og maler det gennemsigtige sort, og netop til de tilfælde findes JPEG med en fast fyldfarve, der går uden om problemet.
Tjek i DevTools, at alt sker i browseren
Du behøver ikke stole på påstanden om, at intet uploades, du kan se det med egne øjne. Højreklik og vælg Inspicer, eller tryk bare F12, gå til fanen Netværk og ryd den. Upload så et billede i værktøjet og træk lidt i håndtagene, mens du følger med. Det eneste, der dukker op, er de ressourcer, der bygger selve siden, altså JS, CSS og fonte, og de blev hentet allerede, før du valgte fil. Du finder aldrig en POST eller PUT, der bærer dine billeddata. Når du gemmer, glimter ganske vist en kort blob:-anmodning til, men det er kun browseren, der leverer den lokale fil tilbage til dig, ikke noget, der sendes ud. Billedet af det er det samme, uanset om du sidder i Chrome, Firefox, Safari eller Edge.
