Bijsnijden

Afbeelding bijsnijden Cirkel bijsnijden

Optimaliseren

Afbeelding comprimeren Achtergrond verwijderen AI-afbeeldingsupscaler

Bewerken

Afbeelding verkleinen/vergroten

Converteren

Overige

Afbeelding naar PDF

Afbeelding rond bijsnijden in je browser

Upload een JPG, PNG, WebP of AVIF en download een ronde afbeelding met transparante achtergrond.

of sleep de afbeelding hierheen

Over deze tool

Snijd elke foto bij tot een perfecte cirkel, direct in je browser. Sleep een JPG, PNG, WebP of AVIF naar de pagina en Cropper.js opent de afbeelding in een cirkelvormig bewerkingsvlak. Sleep de handvatten om je onderwerp te centreren, pas de cirkelgrootte aan en klik op Opslaan. De browser zet het resultaat om naar een transparante PNG, WebP of AVIF, of een JPEG met een gekozen achtergrondkleur, en downloadt het bestand direct naar je apparaat. Tijdens het bijsnijden verschijnen er geen uitvoerverzoeken in het tabblad Netwerk van DevTools. Bestanden tot 25 MB en 16 megapixel worden verwerkt. De tool werkt in elke moderne browser op desktop, tablet en telefoon, zonder installatie. De meeste gebruikers passen de tool toe om een vierkante portretfoto of logo goed zichtbaar te maken in de ronde avatarslots van LinkedIn, Discord, Slack en Instagram.

Open the circle crop tool
Hoe je een afbeelding rond bijsnijdt

Hoe je een afbeelding rond bijsnijdt

Sleep een JPG, PNG, WebP of AVIF naar de pagina en Cropper.js v2 laadt het bestand in een cirkelvormig bewerkingsvlak. Een donkere overlay markeert het gebied dat wordt weggesneden, en de heldere cirkel in het midden geeft aan wat blijft staan. Sleep de cirkel om je onderwerp te centreren, schaal met de hoekhandvatten of knijp op een touchscreen. Wanneer de kadrering goed staat, kies je een formaat en klik je op Opslaan. De browser codeert het bestand lokaal en activeert een download. Open het tabblad Netwerk in DevTools tijdens het bijsnijden en je ziet het leeg blijven. Er vertrekt geen POST-verzoek bij upload, slepen of opslaan.

Pick a format and crop
Kies je uitvoerformaat

Kies je uitvoerformaat

Vier formaten staan in het downloadmenu. PNG houdt het gebied buiten de cirkel volledig transparant en is de veilige standaard voor avatars en logo's. WebP ondersteunt ook transparantie en is doorgaans 25 tot 35 procent kleiner dan PNG. AVIF is het kleinste van de drie transparante formaten, vaak de helft van de WebP-omvang, maar de @jsquash/avif-encoder duurt ongeveer 3 seconden op desktop en tot 30 seconden op een mid-range telefoon. JPEG levert een platte cirkel op een egale achtergrondkleur die je kiest. Dit formaat heeft geen alfakanaal, dus transparantie wordt vervangen door de vulkleur. Kies PNG voor betrouwbaarheid, WebP voor bestandsgrootte, AVIF wanneer bandbreedte telt, en JPEG alleen als het doelplatform transparante bestanden weigert.

Crop for any social platform
Ronde foto's voor elk platform

Ronde foto's voor elk platform

De meeste sociale platforms tonen avatars in een cirkelvormig masker, dus door vooraf bij te snijden bepaal je zelf wat er binnen valt. LinkedIn toont de profielfoto op minstens 400 bij 400 px op de profielpagina en ongeveer 48 px in de feed. Discord toont de gebruikersavatar op 128 bij 128 in serverledenlijsten en 32 bij 32 in de chat. Instagram geeft de profielfoto rond op ongeveer 110 px op mobiel en 32 px in feedminiaturen. Slack rendert op ongeveer 36 px in de kanalenlijst. De tool exporteert op de originele resolutie, dus pas de afbeelding eerst aan via /resize/ als je een exacte pixelmaat nodig hebt. Zo voorkom je elk upscaling-artefact.

Try it inside the limits
Wat deze tool niet doet

Wat deze tool niet doet

Bestanden boven 25 MB of groter dan 16 megapixel worden geweigerd met een vriendelijke foutmelding. De controle leest de magic bytes en headerafmetingen vóór het decoderen, zodat een 50 megapixel DSLR-foto nooit een mobiele browser laat crashen. HEIC-bestanden decoderen alleen op Safari 17 en nieuwer, dat createImageBitmap voor dit formaat native ondersteunt. Chrome, Firefox en Edge retourneren een decodeerfout en de tool stelt voor om eerst naar JPG te converteren. Geanimeerde GIF's exporteren alleen het eerste frame. AVIF-codering is traag op mobiel, rond 30 seconden voor een invoer van 8 megapixel. De cirkelplaatsing is altijd handmatig. Er is geen AI-detectie van gezichten of onderwerpen.

Crop in your browser now
Hoe je afbeelding op je apparaat blijft

Hoe je afbeelding op je apparaat blijft

Cropper.js tekent het masker in de Canvas API van de browser. De codering draait ook lokaal, via canvas.toBlob voor PNG, WebP en JPEG, of via de @jsquash/avif WASM-module voor AVIF. Het gedownloade bestand komt van een blob-URL die is aangemaakt met URL.createObjectURL en wijst naar geheugen dat de browser voor je tabblad vasthoudt. Open DevTools, ga naar het tabblad Netwerk, wis de lijst en upload daarna een afbeelding om bij te snijden. Er verschijnt geen nieuw POST- of PUT-verzoek met afbeeldingsdata. Wanneer je op Opslaan klikt, flikkert er kort een blob:-verzoek door het paneel. Dat is de lokale resolve, geen upload. Dit werkt op dezelfde manier in Chrome, Firefox, Safari en Edge.

Make your round profile picture
Ronde profielfoto voor elk sociaal platform

Ronde profielfoto voor elk sociaal platform

Een profielfoto telt, want het is het eerste wat anderen zien. De meeste platforms tonen avatars in een cirkel, dus het vierkant dat je uploadt wordt aan de randen afgesneden. Door zelf bij te snijden bepaal je wat er binnen de cirkel blijft en wat eruit valt. Hetzelfde geldt voor ronde logo's voor een merk, teamfotobadges in een directory, servericonen op Discord en stickerwerk. Eén ding om te onthouden: een portretfoto leest beter met een kleine marge rond het hoofd, niet een strakke uitsnede pal langs de haarlijn. Plaats de ogen iets boven het midden van de cirkel en het resultaat oogt op elk weergaveformaat in balans.

Hoe je een foto rond bijsnijdt

  1. Sleep je afbeelding naar de pagina

    Klik op het uploadgebied of sleep een JPG, PNG, WebP, AVIF of GIF-bestand direct naar de pagina. Het cirkelvormige bijsnijdvlak opent automatisch.

  2. Positioneer de cirkel over je onderwerp

    Sleep de cirkel om je gezicht of logo te centreren. Knijp of scroll om de grootte aan te passen tot de kadrering goed staat.

  3. Kies een uitvoerformaat

    Selecteer PNG of WebP voor een transparante cirkel, AVIF voor het kleinste bestand, of JPEG als je een egale achtergrondkleur nodig hebt.

  4. Klik op Opslaan en download je bestand

    De browser codeert het resultaat lokaal en downloadt het naar je apparaat. De bestandsnaam behoudt je originele naam met -circle toegevoegd.

Heb je een rechthoek nodig, geen cirkel?

Deze tool levert een vorm, de cirkel. Voor rechthoeken met vrije verhouding gebruik crop image. Voor Instagram feed (1080×1080) gebruik vierkante crop of een van de per-platform crop tools.

Rechthoekig bijsnijden Crop hub

Veelgestelde vragen

Hoe kun je een afbeelding rond uitsnijden?

Sleep je afbeelding (JPG, PNG, WebP, AVIF, GIF of BMP) naar de bijsnijdpagina. Cropper.js opent de afbeelding met een cirkelselectie die al in het midden staat. Sleep de cirkel om je onderwerp te kadreren, pas de grootte aan met de hoekhandvatten of een knijpgebaar, en klik op Opslaan. De browser codeert standaard een transparante PNG en downloadt die direct. Het hele proces duurt voor een gemiddelde foto minder dan 30 seconden.

Hoe snijd ik een afbeelding rond uit zonder achtergrond?

Kies PNG, WebP of AVIF als uitvoerformaat. Deze drie formaten ondersteunen een alfakanaal, waardoor het gebied buiten de cirkel volledig transparant is. In ontwerptools en berichten-apps verschijnt de transparante achtergrond als een dambordpatroon. JPEG ondersteunt geen transparantie. Bij het kiezen van JPEG word je gevraagd een vulkleur te kiezen voor het gebied buiten de cirkel.

Kan ik de tool gebruiken op mijn telefoon?

De tool werkt in elke moderne browser op iPhone, iPad en Android-telefoons. Sleephandvatten reageren op aanraking en knijpgebaren. De belangrijkste beperking op mobiel is de AVIF-codeertijd. Een foto met hoge resolutie kan 30 seconden of langer duren, omdat de WASM-encoder op de CPU draait. PNG en WebP zijn veel sneller en werken goed op mid-range apparaten.

Worden mijn afbeeldingen opgeslagen?

Nee. Cropper.js verwerkt de bijsnijding volledig in de Canvas API van je browser. Tijdens het uploaden en bijsnijden verschijnen er geen POST- of PUT-verzoeken met afbeeldingsdata in het tabblad Netwerk van DevTools. Het gedownloade bestand is afkomstig van een lokale blob-URL op je apparaat. Je kunt dit zelf controleren via F12 in elke moderne browser.

Welke bestandsindelingen worden ondersteund?

Invoer accepteert JPG, PNG, WebP, AVIF, GIF (alleen het eerste frame, animatie wordt niet bewaard), BMP en SVG. HEIC werkt op Safari omdat Safari dit formaat native verwerkt via createImageBitmap. Op Chrome, Firefox en Edge worden HEIC-bestanden geweigerd met een vriendelijke foutmelding. De formaatdetectie gebruikt magic bytes, niet de bestandsnaam, dus een hernoemd bestand wordt nog steeds correct herkend.

Heeft de uitgesneden afbeelding een transparante achtergrond?

Ja, als je PNG, WebP of AVIF kiest. Het gebied buiten de cirkel heeft dan een alfawaarde van 0 (volledig transparant). Op platforms die avatars in een cirkel tonen, is de transparante achtergrond onzichtbaar en toont de achtergrond van het platform zelf. Bij JPEG is er geen transparantie en kies je een vulkleur voor het gebied buiten de cirkel.

De details

Notities van het team over vakmanschap, formaten en de kleine beslissingen achter een goede ronde uitsnede.

Hoe Cropper.js v2 het cirkelmasker tekent
Cropper.js v2 is beschikbaar als Web Component. De elementen cropper-canvas, cropper-image en cropper-handle vormen samen het bewerkingsvlak. De ronde uitsnijding is geen CSS border-radius-truc, maar een canvas composite-bewerking (destination-in) die wordt toegepast op het moment van exporteren. De gebruiker ziet de volledige afbeelding met een donkere overlay, en het cirkelvormige selectiegebied wordt live berekend op basis van de handvatposities in de interne toestand van de component. Wanneer op Opslaan wordt geklikt, wordt een tijdelijk canvas aangemaakt op de geselecteerde afmetingen, de afbeelding wordt erop getekend en het composietmasker verwijdert alles buiten de cirkel. Voor PNG, WebP en AVIF bevat het resultaat een alfakanaal. Voor JPEG worden de transparante pixels gevuld met een egale kleur, omdat JPEG geen alfakanaal in de specificatie heeft. Cropper.js v2 wordt onder de MIT-licentie geleverd op github.com/fengyuanchen/cropperjs.
PNG, WebP, AVIF en JPEG voor ronde uitsnijdingen
PNG is verliesvrij en universeel ondersteund. Een 512 bij 512 cirkelexport van een foto van 8 megapixel haalt gemiddeld 180 tot 350 KB, afhankelijk van de fotocomplexiteit. WebP is visueel verliesvrij op kwaliteit 85 tot 90, 25 tot 40 procent kleiner dan PNG, en wordt ondersteund door elke browser die na 2023 is uitgebracht. AVIF gebruikt AV1-intracodering, doorgaans 40 tot 50 procent kleiner dan WebP bij gelijkwaardige visuele kwaliteit, maar de @jsquash/avif WASM-encoder duurt langer. Ongeveer 3 seconden op desktop, en tot 30 seconden op een mid-range mobiel voor een invoer van 8 megapixel. JPEG codeert het snelst, rond 400 ms op desktop, maar heeft geen alfakanaal. Gebruik JPEG alleen wanneer het doelplatform transparante bestanden weigert, zoals bij sommige Slack-integraties en sommige e-mailclients. De meeste gebruikers kiezen het beste PNG voor betrouwbaarheid of WebP voor bestandsgrootte.
Platformmaten voor cirkelvormige avatars
Verschillende platforms tonen avatars op verschillende formaten binnen het cirkelvormige masker. LinkedIn: profielfoto op minstens 400 bij 400 px, getoond in een cirkel op de profielpagina en op ongeveer 48 px in de feed. Discord: gildepictogram tot 512 bij 512, gebruikersavatar op 128 bij 128 in serverledenlijsten en 32 bij 32 in de chat. Instagram: profielfoto cirkelvormig op ongeveer 110 px op het mobiele profiel, 32 px in feedminiaturen. Slack: werkruimteavatar tot 512 bij 512, cirkelvormig weergegeven in de kanalenlijst op ongeveer 36 px. De tool exporteert op de originele fotoresolutie. Heb je een exact uitvoerformaat nodig, pas dan de afbeelding eerst aan via /resize/ voordat je de cirkeluitsnijding uitvoert. Zo krijg je een pixelnauwkeurig resultaat zonder upscaling-artefacten.
HEIC en de Safari-exclusieve beperking uitgelegd
HEIC is Apple's containerformaat dat HEVC-compressie gebruikt. Safari 17 en nieuwer verwerkt HEIC native via createImageBitmap, waardoor het bijsnijden van een iPhone-foto in een cirkel in Safari werkt zonder conversiestap. Chrome, Firefox en Edge implementeren createImageBitmap voor HEIC per 2026 niet en retourneren een decodeerfout. De tool controleert de magic bytes bij het uploaden. Als op een niet-Safari-browser een HEIC-bestand wordt gedetecteerd, verschijnt een vriendelijke foutmelding die aanraadt om eerst naar JPG te converteren. De oplossing voor niet-Safari-gebruikers: open de foto op een iPhone in de Foto's-app en deel als JPG (beschikbaar via het deelmenu), of gebruik /heic-to-jpg/ als je het HEIC-bestand al op een desktop hebt. Let op: een HEIC-bestand hernoemd naar .jpg wordt nog steeds geweigerd, want de magic-byte-controle herkent de hernoeming.
Waarom het gebied buiten de cirkel transparant is
Als je een PNG- of WebP-cirkeluitsnijding exporteert, hebben de pixels buiten de cirkelrand een alfawaarde van 0, oftewel volledig transparant. Op platforms die avatars in een cirkelvormig kader tonen, wordt de transparante achtergrond onzichtbaar en valt de eigen achtergrondkleur van het platform schoon door. Op platforms die het bestand op volledige grootte tonen, zoals een bijlagepreview of een fotoalbumweergave, verschijnt het transparante gebied als dambordpatroon. Plak je de cirkel in een ontwerptool als Figma of Canva, dan kun je hem over elke kleur leggen zonder een witte halo. De JPEG-optie bestaat voor gevallen waarin transparantie problemen veroorzaakt. Sommige e-mailclients, sommige CMS-uploaders en sommige oudere platforms verwijderen transparantie en vervangen die door zwart. JPEG met een gekozen vulkleur voorkomt dat.
In-browser verwerking verifiëren met DevTools
Iedereen kan de no-upload-claim zelf controleren. Open de DevTools van je browser (F12 of rechtermuisknop en kies Inspecteren), ga naar het tabblad Netwerk, klik op Wissen om eerdere vermeldingen te verwijderen, en upload daarna een afbeelding naar de cirkeluitsnijdtool om de handvatten te slepen. Kijk naar het tabblad Netwerk tijdens het uploaden en tijdens het slepen. De enige verzoeken die verschijnen zijn voor pagina-assets (JS, CSS, lettertypen) die vóór de upload zijn geladen. Er verschijnt geen nieuw POST- of PUT-verzoek dat afbeeldingsdata draagt. Na het klikken op Opslaan verschijnt er kortstondig één verzoek naar een blob:-URL in het tabblad. Dat is de browser die de lokale blob verwerkt, geen gegevens die naar een server worden verzonden. Deze verificatie werkt in Chrome, Firefox, Safari en Edge.