Noter fra teamet om håndværk, formater og de små beslutninger bag en god rund beskæring.
Sådan tegnes det runde udsnit
Den runde form er ikke et afrundet CSS-hjørne. Du ser altid hele billedet under en mørk ring, og den levende cirkel følger dine håndtag, mens du trækker. Når du gemmer, tegnes billedet i den valgte størrelse, og alt uden for cirkelkanten klippes væk. PNG, WebP og AVIF beholder en gennemsigtig alfaring omkring udsnittet, mens JPEG uden alfa fylder den ring med en farve, du vælger, før filen bliver til. Intet af dette rører en server, alt sker lokalt.
PNG, WebP, AVIF og JPEG ved cirkelbeskæring
Når du lægger et billede ind i en cirkel, afgør formatet filen. PNG er tabsfri og læses overalt, en cirkel på 512 gange 512 fra en kilde på 8 megapixel vejer som regel 180 til 350 KB afhængigt af detaljerne. WebP giver næsten samme synlige kvalitet på niveau 85 til 90 og kommer 25 til 40 procent lettere ud, læsbar i alle browsere siden 2023. AVIF sparer med AV1 yderligere 40 til 50 procent mod WebP ved lignende kvalitet, men bygges langsommere, nogle sekunder på en bærbar og op til 30 på en mellemklassemobil med den 8 megapixel-input. JPEG er hurtigst, næsten 400 ms på computer, men bærer ingen gennemsigtighed, så brug det kun, hvor gennemsigtige filer afvises, for eksempel i visse Slack-integrationer og e-mailklienter. For de fleste er PNG eller WebP det rigtige valg.
Størrelsesguide til runde profilbilleder pr. platform
Profilbilledestørrelserne varierer pr. platform inde i cirkelmasken. LinkedIn vil have mindst 400 gange 400 px, vist rundt på profilen og omkring 48 px i feedet. Discord begrænser serverikonet til 512 gange 512 og viser brugeravatarer 128 gange 128 i lister, 32 gange 32 i chatten. Instagram ligger nær 110 px i mobilprofilen, 32 px i miniaturer. Slack tegner omkring 36 px i kanallisten ud fra en upload op til 512 gange 512. Da værktøjet beholder kildeopløsningen, sender du billedet gennem /resize/ først, når du har brug for en præcis outputstørrelse, så intet bliver sløret af opskalering.
HEIC og Safari-begrænsningen
HEIC er Apples HEVC-baserede billedformat. Safari 17 og nyere læser det direkte, derfor fungerer cirkeludsnittet af et iPhone-billede i Safari uden konvertering. Chrome, Firefox og Edge læser ikke HEIC selv i 2026 og giver en læsefejl. Værktøjet tjekker de rigtige signaturbytes ved upload, så lander en HEIC i en anden browser end Safari, får du det venlige hint om at konvertere til JPG. Løsningen for dem uden for Safari er nem, del billedet som JPG fra Billeder-appen på iPhone, eller send en eksisterende fil på computeren gennem /heic-to-jpg/. At omdøbe en .heic til .jpg narrer ingen, signaturtjekket fanger det.
Hvorfor området uden for cirklen er gennemsigtigt
Når du eksporterer et rundt udsnit som PNG eller WebP, bærer hver pixel uden for cirklen alfa 0, helt gennemsigtig. På netværk, der rammer profilbilleder ind i en cirkel, forsvinder denne gennemsigtighed, og deres egen baggrund skinner rent igennem. Viser du den samme fil i fuld størrelse, for eksempel i en forhåndsvisning af en vedhæftning, læses den tomme ring som et skakbræt. Træk cirklen ind i Figma eller Canva, og den hviler på enhver farve uden en hvid kant. JPEG findes til de besværlige tilfælde, fordi visse e-mailklienter, CMS-uploadere og ældre platforme fjerner gennemsigtighed og maler den sort, mens JPEG med fyldfarve går uden om det.
Bekræft behandlingen i browseren med DevTools
Løftet om ingen upload kan du teste selv. Åbn DevTools (F12 eller højreklik og Inspicer), gå til Netværksfanen, tryk Ryd, og upload så i cirkelværktøjet og træk i håndtagene. De eneste poster er sidens dele, JS, CSS og fontene, der blev indlæst, før du valgte fil. Ingen POST eller PUT med dine billeddata dukker nogensinde op. Når du gemmer, glimter en kort blob:-anmodning forbi, det er browseren, der giver dig den lokale fil tilbage, ikke en afsendelse udad. Det samme gælder i Chrome, Firefox, Safari og Edge.