Afbeelding online gratis rond bijsnijden — ronde profielfoto maken

Cirkel of afgerond vierkant: welke vorm gebruik je

De vorm is eigenlijk niet jouw keuze — het platform past zijn eigen masker toe wanneer het je avatar weergeeft, en dat kun je niet overschrijven. Wat je wél kiest, is of je bestand bij dat masker past.

Dat is belangrijk, want een cirkel snijdt ongeveer 21% van een vierkant weg, helemaal in de hoeken. Snij je zelf rond bij, dan zie je precies wat overblijft. Upload je een heel vierkant en hoop je maar het beste, dan knipt de cirkel van het platform weg wat toevallig in die hoeken stond: de kruin van een hoed, een schouder, een half logo.

De vuistregel: gezichten verdragen een cirkel, woordmerken verdragen een afgerond vierkant. Een gezicht is al min of meer rond, dus de hoeken bevatten toch al geen informatie. Een logo met tekst erin is meestal breder dan hoog, en een cirkel amputeert de uiteinden van het woord. Daarom gebruiken Slack, iOS en de Play Store allemaal afgeronde vierkanten voor iconen, terwijl elk sociaal netwerk cirkels gebruikt voor mensen.

Waarom een transparante PNG de extra bytes waard is

Een cirkel die in een JPG is bijgesneden, is niet echt een cirkel. JPG heeft geen alfakanaal, dus de vier hoeken moeten iets bevatten — meestal wit. Op een witte pagina merkt niemand het. Zet die avatar op een donker thema, een gekleurde kaart, een presentatie of een video-overlay, en er verschijnen vier witte driehoeken rond het hoofd.

PNG en WebP hebben allebei een alfakanaal, dus de hoeken slaan "niets" op en de cirkel wordt netjes over elke achtergrond samengesteld. Daarom is PNG hier de standaard. WebP doet hetzelfde werk in ongeveer een derde van de bytes en elke moderne browser leest het — maar sommige uploadformulieren en oudere desktopprogramma's weigeren de extensie nog steeds, dus PNG blijft de veilige keuze als je het bestand aan het systeem van iemand anders overhandigt.

Het enige geval waarin JPG zin heeft, is een grootte-limiet. Als een formulier op JPG staat of je beperkt tot een paar tientallen kilobytes, kies dan hier JPG en stel de achtergrondkleur in op wat de doelpagina daadwerkelijk gebruikt, zodat de hoeken erin verdwijnen.

Een gezicht kadreren dat ook op 32 pixels nog herkenbaar is

Je avatar wordt bijna nooit gezien op het formaat waarin je hem hebt geëxporteerd. In een reactiedraad is hij 32 tot 40 pixels breed. Op die grootte blijven alleen de contour van het hoofd, het contrast tussen gezicht en achtergrond, en ongeveer waar de ogen zitten over. Al de rest is een wazige brei.

Snij dus dichter bij dan natuurlijk aanvoelt. Vul ongeveer 60–70% van de hoogte van de cirkel met het hoofd, zet de ogen iets boven de middellijn, en laat een klein beetje ruimte boven het haar, zodat het bijsnijden niet toevallig oogt. Een drukke achtergrond is verreweg de meest voorkomende fout: die strijdt om de weinige beschikbare pixels en maakt van de hele miniatuur ruis. Is je achtergrond rommelig, dan leest een effen of vervaagde achtergrond achter een ronde bijsnede op elke grootte beter.

Eén praktische test: exporteer de avatar en bekijk hem daarna in je bestandsverkenner op de kleinste miniatuurweergave. Kun je zelf niet zien dat jij het bent, dan kan niemand anders dat ook.

De iOS-squircle, uitgelegd

Apples app-iconen zijn geen afgeronde rechthoeken. Een afgeronde rechthoek verbindt zijn rechte randen met een kwartcirkel-hoek, en de kromming springt abrupt bij die overgang — je oog leest dat als een lichte knik. Apple gebruikt in plaats daarvan een superellips , waarbij de kromming geleidelijk toeneemt vanaf de rand, zodat de omtrek helemaal geen zichtbare overgang heeft. Ontwerpers noemen het resultaat een squircle.

Canvas kan alleen hoeken met cirkelbogen tekenen, dus de modus voor afgerond vierkant hier is de benadering met een afgeronde rechthoek, geen echte superellips. Bij avatarformaten is het verschil één à twee pixels per hoek en niemand zal het opmerken. Zet de hoekradius op ongeveer 22% van de zijde en je komt uit op dezelfde verhouding die Apple gebruikt voor app-iconen; de tool gebruikt standaard 24%, wat overeenkomt met hoe Slack en de meeste chatapps hun avatars maskeren.

De schuifregelaar loopt tot 50%, en dat is een cirkel — een afgerond vierkant waarvan de hoekradius de helft van de zijde bereikt, heeft geen rechte rand meer over. Die continuïteit is de reden waarom beide vormen hier één codepad delen in plaats van twee aparte tools te zijn.

Randen, en waarom ze worden afgesneden

Een ring rond een avatar is een goede manier om hem los te houden van een drukke achtergrond, en het is het enige stukje styling dat het eigen masker van het platform overleeft — zolang de ring zich binnen je afbeelding bevindt in plaats van eromheen.

Het loont om hier precies over te zijn. Als een tool een rand van 6 px buiten een cirkel van 320 px toevoegt, wordt het bestand 332 px, en het platform schaalt het vervolgens opnieuw en past zijn eigen ronde masker opnieuw toe — dat midden door je ring snijdt en hem ongelijk maakt. Deze tool tekent de rand binnen op het formaat dat je hebt opgegeven, dus 320 px blijft 320 px en de ring komt precies op de rand te liggen die het masker verwacht. De randschuifregelaar is om dezelfde reden begrensd op 12% van de zijde: daarboven houdt het op een ring te zijn en wordt het een kader.

Waarom bijsnijden in de browser privater is

De meeste "rond bijsnijden online"-sites uploaden je foto, snijden hem bij op een server en sturen hem terug. Voor een foto van je eigen gezicht is dat een wezenlijk verschil: er bestaat een kopie op de schijf van iemand anders, gedekt door wat hun bewaarbeleid die maand toevallig zegt, en vaak door een gebruiksvoorwaardenclausule die hen een licentie erop verleent.

Resizo heeft geen backend die afbeeldingen ontvangt. Het bijsnijden gebeurt in je tabblad via de eigen canvas-API van de browser. Twee manieren om dat te controleren: open het Network-paneel van je browser en kijk of er niets wordt verzonden terwijl je bijsnijdt, of verbreek de internetverbinding nadat de pagina is geladen en snij toch bij — het werkt nog steeds.

Een nuttig neveneffect: bij het opnieuw coderen verdwijnen de EXIF-metadata, dus de GPS-coördinaten en het tijdstempel die je telefoon in het origineel schreef, gaan niet mee met de avatar die je openbaar plaatst. Heb je die metadata nodig, bewaar dan het originele bestand.