Bijsnijden

Afbeelding bijsnijden Cirkel bijsnijden

Optimaliseren

Afbeelding comprimeren Achtergrond verwijderen AI-afbeeldingsupscaler

Bewerken

Afbeelding verkleinen/vergroten

Converteren

Overige

Afbeelding naar PDF

Afbeelding bijsnijden online

Snijd JPG, PNG, WebP of AVIF bij naar elke beeldverhouding: 1:1, 16:9, 9:16, 4:5, 3:2, 4:3 of aangepaste pixels.

of sleep de afbeelding hier

Over deze tool

Snijd elke afbeelding bij naar een rechthoekig gebied in je browser met de bijsnijdtool van Araluma, aangedreven door cropperjs v2. Sleep een JPG, PNG, WebP of AVIF bestand op de pagina en het bijsnijdvenster opent direct. Versleep de handgrepen om je selectie te plaatsen, vergrendel een verhouding (1:1, 16:9, 9:16, 4:5, 3:2, 4:3 of A4) of typ exacte pixelafmetingen en het kader klikt vast op de juiste maat. De live uitlezing toont je uitvoerformaat in echte bronpixels voordat je op downloaden klikt. Je afbeelding blijft de hele tijd op je apparaat. Het tabblad Netwerk in DevTools laat zien dat er geen enkele afbeelding wordt verzonden tijdens het bijsnijden. PNG en WebP behouden de transparantie van het originele bestand, JPG vervangt transparante delen door een witte achtergrond. EXIF metadata wordt bij elke export verwijderd. Deze tool is voor iedereen die snel en precies een rechthoekige uitsnede wil maken zonder software te installeren, één bestand per keer.

Afbeelding bijsnijden
Hoe de bijsnijdtool werkt in je browser

Hoe de bijsnijdtool werkt in je browser

Je afbeelding wordt direct door de browser geopend via de File API. Er gebeurt geen serveruploadt en er wordt nergens buiten je apparaat een tijdelijke kopie opgeslagen. Sleep het bijsnijdkader naar de juiste positie, vergroot of verklein het vanaf de hoeken of randen, en de live pixeluitlezing past zich aan terwijl je sleept. De coördinaten zijn in pixelruimte van de bronafbeelding, dus het getal dat je ziet is letterlijk het formaat van het uitvoerbestand. Open DevTools en ga naar het tabblad Netwerk terwijl je bijsnijdt: er verschijnt geen enkele uitgaande aanvraag voor afbeeldingen. Het bestand dat je erop sleept en het bestand dat je downloadt blijven beide volledig op je apparaat tijdens de sessie.

Afbeelding bijsnijden
Verhouding vergrendelen of exacte pixels invoeren

Verhouding vergrendelen of exacte pixels invoeren

Tik op een verhoudingschip (1:1 voor vierkant, 16:9 voor breedbeeld, 9:16 voor portret, 4:5, 3:2, 4:3 of A4) en het selectiekader vergrendelt op die verhouding. Sleep het overal op de afbeelding om te kiezen welk deel je wilt behouden. Om een specifieke pixelmaat te halen, typ je de breedte en hoogte in de afmetingsvelden en het bijsnijdkader past zich aan. Het selectieminimum is de intrinsieke ondergrens van het cropperjs v2 selectie-element. De uitvoer is altijd gelijk aan het bronpixelformaat van de selectie. De tool schaalt niet op: als je selectie 600 px breed is, is het uitvoerbestand 600 px breed.

Afbeelding bijsnijden
JPG-uitvoer vervangt transparantie door wit

JPG-uitvoer vervangt transparantie door wit

Als je bronbestand transparante delen heeft (PNG, WebP met alpha of AVIF met alpha) en je kiest JPG als uitvoerformaat, dan worden die transparante pixels met wit gevuld. JPG heeft geen alphakanaal, dus er is nergens plaats voor transparantie. Om transparantie te behouden, kies je PNG, WebP of AVIF op de formaatkiezer in het eindscherm. PNG en WebP behouden het originele alphakanaal ongewijzigd. AVIF ondersteunt ook alpha. De formaatkiezer benoemt elke optie zodat de afweging zichtbaar is voordat je downloadt.

Afbeelding bijsnijden
Verplaats de selectie nauwkeurig met het toetsenbord

Verplaats de selectie nauwkeurig met het toetsenbord

Tab naar het bijsnijdkader en druk dan op de pijltjestoetsen om de selectie pixel voor pixel te verschuiven. Houd Shift ingedrukt en de stap wordt tien pixels. Deze toetsenbordnavigatie is ingebouwd in cropperjs v2 als natieve functionaliteit, niet als aparte toegankelijkheidslaag. Het is handig wanneer je sub-pixel uitlijning nodig hebt die een trackpad niet kan leveren, of wanneer je werkt met alleen een toetsenbord. De selectie reageert ook op aanraking op mobiel: knijp om het canvas te zoomen en sleep daarna de hoeken van de selectie om opnieuw te kadreren. In beide gevallen hoef je geen extra modus in te schakelen.

Afbeelding bijsnijden
Uitvoerformaten: PNG, JPG, WebP en AVIF

Uitvoerformaten: PNG, JPG, WebP en AVIF

Na het bijsnijden kies je je downloadformaat op het eindscherm. PNG is verliesvrij en behoudt transparantie. JPG past lossy compressie toe op kwaliteit 0.9 standaard, wat op de meeste foto's visueel niet te onderscheiden is van de bron. WebP combineert verliesvrije en lossy modi en ondersteunt ook transparantie. AVIF wordt gecodeerd via de @jsquash/avif bibliotheek op kwaliteit 0.9. Het levert het kleinste bestand bij gelijke visuele kwaliteit, maar de eerste AVIF-codering kost een eenmalige download van 870 KB WASM in de sessie. Het standaard uitvoerformaat komt overeen met je invoer: een PNG-invoer staat standaard op PNG-uitvoer, een JPG-invoer op JPG. Je kunt dit op elk moment overschrijven op het eindscherm.

Afbeelding bijsnijden
Wanneer je een andere bijsnijdtool moet gebruiken

Wanneer je een andere bijsnijdtool moet gebruiken

Deze tool snijdt alleen rechthoeken bij: vierkanten, landschapsverhoudingen, portretverhoudingen en aangepaste pixelafmetingen. Voor een ronde uitsnede, een profielfoto met transparante hoeken, gebruik je Circle Crop. Die werkt met dezelfde verwerking in de browser maar levert een ronde PNG. Voor platformspecifieke presets met de exacte standaardafmetingen al ingesteld (Instagram 1080x1080, YouTube thumbnail 1280x720, Facebook cover 1200x630) openen de preset-pagina's in de Crop-familie met die afmetingen klaar voor gebruik, zodat je niets hoeft uit te rekenen. Als je afbeelding van formaat moet veranderen zonder eerst bij te snijden, gebruik dan de Convert tool om naar PNG, JPG, WebP of AVIF te gaan.

Hoe je een foto rond bijsnijdt

  1. Plaats je afbeelding

    Open de tool en sleep je JPG, PNG, WebP of AVIF bestand op het uploadgebied, of klik om door je apparaat te bladeren.

  2. Kies een verhouding of pixelmaat

    Tik op een verhoudingschip (1:1, 16:9, 9:16, 4:5, 3:2, 4:3 of A4) of typ exacte pixelafmetingen in de breedte- en hoogtevelden om het bijsnijdkader in te stellen.

  3. Positioneer het kader

    Sleep het bijsnijdkader naar het gebied van de afbeelding dat je wilt behouden, en pas het formaat aan vanaf de hoeken of randen totdat de live uitlezing het uitvoerformaat toont dat je nodig hebt.

  4. Snij bij en download

    Klik op Bijsnijden, kies je uitvoerformaat (PNG, JPG, WebP of AVIF) op het eindscherm en download het bijgesneden bestand naar je apparaat.

Veelgestelde vragen

Hoe snijd je een afbeelding bij?

Sleep je afbeelding op de bijsnijdtool, kies een verhouding of typ pixelafmetingen, versleep het selectiekader over het gebied dat je wilt behouden, klik op Bijsnijden en download. Het hele proces draait in je browser. Een typische uitsnede van upload tot download duurt minder dan tien seconden op een modern apparaat.

Hoe kan ik PNG-afbeeldingen online bijsnijden?

Upload de PNG naar de bijsnijdtool, stel de verhouding of afmetingen in, plaats het bijsnijdkader en klik op Bijsnijden. Kies op het eindscherm PNG als uitvoerformaat om het alphakanaal intact te houden. Als je in plaats daarvan JPG kiest, worden transparante delen vervangen door een witte achtergrond. PNG-uitvoer is verliesvrij, dus er gaat geen pixelkwaliteit verloren tijdens het bijsnijden.

Hoe snijd ik foto's bij voor Instagram zonder app?

Open de bijsnijdtool in je browser, upload je foto en tik op de 1:1 chip voor een vierkante Instagram-post of de 4:5 chip voor een portretpost. Sleep het kader om je onderwerp te kadreren, klik op Bijsnijden en download. De uitvoer heeft de bronpixelmaat van de selectie. Voor een Instagram Story of Reel gebruik je in plaats daarvan de 9:16 verhouding.

Wat zijn de beste beeldverhoudingen om afbeeldingen bij te snijden voor social media plaatsingen?

Gebruik 1:1 voor een vierkante Instagram-post, 4:5 voor een portretpost die meer van de feed vult, 9:16 voor een Story of Reel en 16:9 voor een YouTube-thumbnail of Twitter-header. Facebook covers werken het beste op 1200x630 pixels, wat dicht bij een 2:1 verhouding ligt. De bijsnijdtool heeft chips voor 1:1, 16:9, 9:16, 4:5, 3:2 en 4:3, plus invoer van aangepaste pixels.

Kan ik met deze tool een afbeelding in een cirkel uitsnijden?

Nee, deze tool snijdt alleen rechthoeken bij: vierkant, landschap, portret en aangepaste afmetingen. Voor een ronde uitsnede met transparante achtergrond gebruik je de Circle Crop tool. Die gebruikt dezelfde browser-gebaseerde verwerking dus je afbeelding blijft op je apparaat, maar levert een ronde PNG met transparante hoeken in plaats van een rechthoek.

Hoe snijd ik een afbeelding bij op een exacte pixelmaat?

Typ de gewenste breedte en hoogte in de afmetingsvelden op het bijsnijdcanvas. Het bijsnijdkader past zich aan en de live uitlezing bevestigt de uitvoermaat in bronpixels. De uitvoer is altijd gelijk aan de bronpixelafmetingen van de selectie. De tool schaalt niet op: als de selectie kleiner is dan je doel, wordt de uitvoer ook kleiner.

De details

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

De cropperjs v2 bibliotheek en wat er veranderde ten opzichte van v1
Deze tool is gebouwd op cropperjs versie 2.1.1, een volledige herschrijving van de oorspronkelijke cropperjs bibliotheek. De v2 release vervangt de oude constructor-gebaseerde API (new Cropper(img, { aspectRatio: 1 })) door een Web Components architectuur. Het bijsnijdcanvas, de selectie-overlay en het afbeeldingselement zijn allemaal aangepaste HTML-elementen die geregistreerd worden via de CustomElementRegistry van de browser. Dit betekent dat de Shadow DOM alle interne stijlen afhandelt. Er is geen apart cropper.css bestand meer om te importeren, wat één Vite-asset-aanvraag elimineert vergeleken met v1. De vergrendeling van de beeldverhouding wordt nu ingesteld op het selectie-element zelf (cropperSelection.aspectRatio = 1) in plaats van op de constructor, dus de verhouding kan tijdens runtime worden gewijzigd zonder de hele bijsnijdinterface opnieuw te initialiseren. De bibliotheek weegt 41.960 bytes raw en 12.175 bytes gzip, gemeten direct vanuit de content-length header van de jsDelivr CDN. Die 12 KB wordt één keer per sessie betaald en hergebruikt over alle preset-bijsnijdroutes via Vite chunk splitting.
Hoe de pixelafmetingen van de uitvoer worden berekend (geen opschaling)
Als je de bijsnijdselectie op het scherm versleept, zijn de coördinaten die je ziet in pixelruimte van de bronafbeelding, niet in CSS-pixelruimte. Dit onderscheid is belangrijk voor schermen met hoge DPI: een telefoon met een 3x apparaatpixelverhouding toont een afbeelding van 300 CSS-pixels breed als 900 echte pixels, maar de selectiecoördinaten weerspiegelen de 900 echte pixels, niet de 300 CSS-pixels. Het uitvoerbestand dat je downloadt bevat precies het aantal pixels dat de selectierechthoek vertegenwoordigt in de bronafbeelding. De bijsnijdoperatie roept selection.$toCanvas() aan vanuit de cropperjs v2 API, een asynchrone methode die een verse HTMLCanvasElement teruggeeft op het pixelformaat van de selectie. Dat canvas wordt vervolgens doorgegeven aan canvas.toBlob() voor PNG, JPG of WebP, of aan de @jsquash/avif encoder voor AVIF. Er wordt geen opschalingsstap ingevoegd. Als je selectie 800 pixels breed is, is de uitvoer 800 pixels breed. Social media platformpresets (1080x1080 voor Instagram, 1280x720 voor YouTube) worden alleen op die formaten geleverd wanneer de bronafbeelding genoeg pixels bevat om de selectie te vullen.
EXIF metadata verwijdering en wat verloren gaat
Elke export verwijdert EXIF, IPTC, XMP en ICC profielgegevens. Dit gebeurt op canvas-pijplijnniveau: de browser tekent de gedecodeerde afbeeldingspixels op een HTMLCanvasElement en het canvas codeert naar een nieuw bestand. Het canvas heeft geen besef van metadata-containers, het slaat alleen pixelwaarden en coderingsparameters op. Wat wordt verwijderd zijn GPS-coördinaten, cameramerk en model, brandpuntsafstand van de lens, belichtingsinstellingen, copyrightvelden en kleurprofieltags. Het sRGB kleurprofiel is in feite de aanname die het canvas maakt: kleuren worden weergegeven via de schermpijplijn van de browser en opnieuw gecodeerd zonder bijgevoegd profiel. Voor de meeste webpublicaties en social media is verwijderde EXIF de voorkeur omdat GPS-data locatie-informatie kan blootleggen die de gebruiker niet wilde delen. Voor professionele fotografieworkflows waar kleurprofiel nauwkeurigheid telt: ICC profiel-getrouwheid wordt niet behouden en voor levering aan druk of publicatie moet je een kleurbeheerde exporttool gebruiken.
Wat gebeurt er als je een geanimeerde GIF bijsnijdt
Als je een geanimeerde GIF op de bijsnijdtool sleept, decodeert de browser alleen het eerste frame in het afbeeldingselement dat door het bijsnijdcanvas wordt gebruikt. Dit is browsergedrag, geen beperking van cropperjs: de HTMLImageElement stelt afzonderlijke frames van een geanimeerde GIF niet beschikbaar aan JavaScript op een manier waarop de canvas API erover kan itereren. Het resultaat is dat alleen het eerste frame beschikbaar is voor de bijsnijdselectie en de uiteindelijke uitvoer is een stilstaand beeld in welk formaat je ook kiest op het eindscherm. Als de invoer een GIF is en je kiest GIF als uitvoer, dan bevat de canvas.toBlob implementatie van de browser geen GIF-encoder, dus de uitvoer valt stilzwijgend terug op PNG. De tool weigert GIF expliciet als uitvoerformaatoptie om die stille verlaging te voorkomen. Als je alle frames van een animatie moet bijsnijden, heb je een tool nodig die frame voor frame werkt, en dat ondersteunt deze tool niet.
Toetsenbordnavigatie en toegankelijkheid
Het cropperjs v2 selectie-element implementeert toetsenbordnavigatie als onderdeel van zijn Web Component specificatie. Zodra je naar de bijsnijdselectie tabt, verplaatsen de pijltjestoetsen het kader één pixel per keer in de richting die wordt ingedrukt. Shift plus een pijltjestoets verplaatst het kader tien pixels. Dit is natuurlijk toegankelijk zonder schermlezer-workaround of aangepaste JavaScript-overlay: de toetsenbordhandler woont in de shadow root van het selectie-element en vuurt op keydown. Dit is belangrijk voor gebruikers die afhankelijk zijn van toetsenbordnavigatie, waaronder sommige hulptechnologie-setups, motorische toegankelijkheidsapparaten en precisieworkflows waar een trackpad geen sub-pixel uitlijning betrouwbaar kan halen. De live pixeluitlezing die aan de selectie hangt werkt ook bij elke toetsaanslag bij, dus schermlezer-gebruikers met aria-live regio's op de uitlezing kunnen de huidige afmetingen horen veranderen. Toetsenbordtoegankelijkheid is één gebied waar deze tool voorloopt op iLoveIMG en img2go, die geen bijsnijdnavigatie met pijltjestoetsen implementeren.
Afwegingen bij formaatkeuze na bijsnijden
De formaatkiezer op het eindscherm geeft vier opties. PNG is verliesvrij: elke pixel in het bijsnijdgebied wordt exact opgeslagen zoals deze uit de bron werd gedecodeerd. De bestandsgrootte is groter dan JPG voor dezelfde inhoud, doorgaans drie tot vijf keer groter voor een foto. JPG past lossy compressie toe op kwaliteit 0.9 (op een schaal van 0 tot 1), wat ruwweg overeenkomt met de hoge kwaliteit preset in de meeste desktop-editors. Bij q0.9 is het verschil tussen origineel en uitvoer doorgaans niet zichtbaar op een standaard monitor maar het bestand is aanzienlijk kleiner. WebP op dezelfde kwaliteitsinstelling produceert een bestand ongeveer 25 tot 35 procent kleiner dan JPG in onze coderingstests, met dezelfde perceptuele kwaliteit op foto's. WebP ondersteunt ook een verliesvrije modus en behoudt transparantie. AVIF op kwaliteit 0.9 via de @jsquash/avif bibliotheek produceert de kleinste uitvoer van de vier formaten, maar de eerste codering in een sessie vereist het downloaden van een 870 KB WASM module. Volgende AVIF-coderingen in hetzelfde tabblad zijn snel omdat de module al geladen is.