Beskär

Beskär bild Cirkulär beskärning

Optimera

Komprimera bild AI-bilduppskalare Ta bort bakgrund

Redigera

Ändra bildstorlek

Konvertera

Övriga

Bild till PDF

Beskära bild online

Beskär JPG, PNG, WebP eller AVIF i valfritt förhållande: 1:1, 16:9, 9:16, 4:5, 3:2, 4:3 eller egna pixlar.

eller släpp bilden här

Om det här verktyget

Beskär valfri bild till en rektangulär yta direkt i webbläsaren med Araluma:s beskärningsverktyg som drivs av cropperjs v2. Släpp en JPG, PNG, WebP eller AVIF-fil på sidan och beskärningsytan öppnas omedelbart. Dra handtagen för att placera markeringen, lås ett förhållande (1:1, 16:9, 9:16, 4:5, 3:2, 4:3 eller A4) eller skriv exakta pixelmått, så anpassar sig ramen automatiskt. Den direkta avläsningen visar utdatastorlek i verkliga källpixlar innan du laddar ner. Din bild stannar på enheten under hela processen, fliken Network i DevTools visar noll utgående bildförfrågningar under beskärningen. PNG- och WebP-utdata behåller transparensen från originalfilen, medan JPG-utdata ersätter genomskinliga områden med vit bakgrund. EXIF-metadata tas bort vid varje export. Verktyget passar alla som behöver snabb och exakt rektangulär beskärning utan att installera programvara, en fil i taget.

Beskär bild
Så fungerar beskärningsverktyget i din webbläsare

Så fungerar beskärningsverktyget i din webbläsare

Bilden öppnas direkt av webbläsaren via File API. Ingen serveruppladdning sker och ingen tillfällig kopia lagras utanför din enhet. Dra beskärningsramen till önskat läge, ändra storlek från hörnen eller kanterna, och den direkta pixelavläsningen uppdateras medan du drar. Koordinaterna ligger i källbildens pixelrymd, så siffran som visas är den bokstavliga storleken på utdatafilen. Öppna DevTools och växla till fliken Network medan du beskär, ingen utgående bildförfrågan visas. Filen du släpper och filen du laddar ner stannar båda helt på din enhet under hela sessionen.

Beskär bild
Lås ett förhållande eller ange exakta pixlar

Lås ett förhållande eller ange exakta pixlar

Tryck på ett förhållandechip (1:1 för kvadrat, 16:9 för widescreen, 9:16 för stående, 4:5, 3:2, 4:3 eller A4) och markeringsramen låses till den proportionen. Dra den var som helst på bilden för att välja vilken del du vill behålla. För att träffa ett specifikt pixelmål, skriv bredden och höjden i dimensionsfälten så ändrar beskärningsramen storlek för att matcha. Utdata är alltid lika med markeringens källpixelstorlek. Verktyget skalar inte upp, om din markering är 600 pixlar bred är utdatafilen också 600 pixlar bred.

Beskär bild
JPG-utdata ersätter transparens med vitt

JPG-utdata ersätter transparens med vitt

Om din källfil har genomskinliga områden (PNG, WebP med alfa eller AVIF med alfa) och du väljer JPG som utdataformat, fylls de genomskinliga pixlarna med vitt. JPG har ingen alfakanal, så det finns ingenstans att lagra transparensen. För att bevara transparens, välj PNG, WebP eller AVIF i formatväljaren på slutförandeskärmen. PNG- och WebP-utdata bär den ursprungliga alfakanalen oförändrad. AVIF stöder också alfa. Formatväljaren märker varje alternativ så att avvägningen är synlig innan du laddar ner.

Beskär bild
Flytta markeringen exakt med tangentbordet

Flytta markeringen exakt med tangentbordet

Tryck Tab för att flytta till beskärningsramen, använd sedan piltangenterna för att flytta markeringen en pixel åt gången. Håll Shift med en pil så ökar steget till tio pixlar. Den här tangentbordsnavigationen är inbyggd i cropperjs v2 som inbyggd funktionalitet, inte ett separat tillgänglighetslager. Användbar när du behöver subpixel-visuell justering som en styrplatta inte kan leverera, eller när du arbetar enbart med tangentbord. Markeringen svarar också på tryck på mobil, nyp för att zooma duken, dra sedan i markeringshörnen för att rama om. Inget extra läge att aktivera i något av fallen.

Beskär bild
Utdataformat: PNG, JPG, WebP och AVIF

Utdataformat: PNG, JPG, WebP och AVIF

Efter beskärning väljer du nedladdningsformat på slutförandeskärmen. PNG är förlustfri och bevarar transparens. JPG tillämpar förlustfri komprimering vid kvalitet 0.9 som standard, vilket är visuellt omöjligt att skilja från källan på de flesta foton. WebP balanserar förlustfria och förlustbringande lägen och stöder också transparens. AVIF kodas via @jsquash/avif-biblioteket vid kvalitet 0.9. Den producerar den minsta filen vid likvärdig visuell kvalitet, men den första AVIF-kodningen i en session kräver en engångsnedladdning av en WASM-modul på 870 KB. Standard utdataformat matchar din indata, PNG-indata blir PNG-utdata, JPG-indata blir JPG. Du kan ändra det när som helst på slutförandeskärmen.

Beskär bild
När du ska använda ett annat beskärningsverktyg

När du ska använda ett annat beskärningsverktyg

Verktyget beskär bara rektanglar, kvadrater, liggande förhållanden, stående förhållanden och anpassade pixelmått. För cirkelbeskärning, en profilbild med genomskinliga hörn, använd Circle Crop istället. Det delar samma bearbetning på webbläsarsidan men ger en rund PNG. För plattformsspecifika förinställningar med standardmått redan inställda (Instagram 1080×1080, YouTube-miniatyr 1280×720, Facebook-omslag 1200×630) öppnas förinställningssidorna i Crop-familjen med de måtten förladdade så du inte behöver räkna något. Om din bild behöver byta format utan att beskäras först, använd Convert-verktyget för att hamna i PNG, JPG, WebP eller AVIF.

Så här beskär du ett foto till en cirkel

  1. Släpp din bild

    Öppna verktyget och släpp din JPG-, PNG-, WebP- eller AVIF-fil på uppladdningsområdet, eller klicka för att bläddra efter filen på din enhet.

  2. Välj förhållande eller pixelstorlek

    Tryck på ett förhållandechip (1:1, 16:9, 9:16, 4:5, 3:2, 4:3 eller A4) eller skriv exakta pixelmått i breddmå- och höjdfälten för att ställa in beskärningsramen.

  3. Placera ramen

    Dra beskärningsramen till det bildområde du vill behålla, ändra sedan storlek från hörnen eller kanterna tills den direkta avläsningen visar utdatastorleken du behöver.

  4. Beskär och ladda ner

    Klicka på Beskär, välj utdataformat (PNG, JPG, WebP eller AVIF) på slutförandeskärmen och ladda ner den beskurna filen till din enhet.

Vanliga frågor

Hur beskär jag en bild online?

Släpp din bild på beskärningsverktyget, välj ett förhållande eller skriv pixelmått, dra markeringsramen till området du vill behålla och klicka sedan på Beskär och ladda ner. Hela processen körs i din webbläsare. En typisk beskärning från uppladdning till nedladdning tar mindre än tio sekunder på en modern enhet.

Hur beskär jag PNG-bilder online?

Ladda upp PNG:en till beskärningsverktyget, ställ in förhållandet eller måtten, placera beskärningsramen och klicka på Beskär. På slutförandeskärmen väljer du PNG som utdataformat för att hålla alfakanalen intakt. Om du väljer JPG i stället ersätts genomskinliga områden med vit bakgrund. PNG-utdata är förlustfri, så ingen pixelkvalitet går förlorad under beskärningen.

Hur beskär jag foton för Instagram utan en app?

Öppna beskärningsverktyget i din webbläsare, ladda upp ditt foto och tryck på 1:1-chipet för ett kvadratiskt Instagram-inlägg eller 4:5-chipet för ett stående inlägg. Dra ramen för att rama in ditt motiv, klicka på Beskär och ladda ner. Utdatastorleken matchar markeringens källpixlar. För en Instagram Story eller Reel, använd förhållandet 9:16.

Vilka är de bästa förhållandena för att beskära bilder för sociala medier?

Använd 1:1 för ett kvadratiskt Instagram-inlägg, 4:5 för ett stående inlägg som fyller mer av flödet, 9:16 för en Story eller Reel, och 16:9 för en YouTube-miniatyr eller Twitter-header. Facebook-omslag fungerar bäst i storleken 1200×630 pixlar, vilket är nära förhållandet 2:1. Beskärningsverktyget har chips för 1:1, 16:9, 9:16, 4:5, 3:2 och 4:3, plus anpassad pixelinmatning.

Kan jag beskära en bild till en cirkel med detta verktyg?

Nej, det här verktyget beskär bara rektanglar, kvadrater, liggande, stående och anpassade mått. För en cirkelbeskärning med genomskinlig bakgrund, använd Circle Crop-verktyget istället. Det använder samma webbläsarbaserade bearbetning så din bild stannar på enheten, men det ger en rund PNG med genomskinliga hörn snarare än en rektangel.

Hur beskär jag en bild till exakt pixelstorlek?

Skriv mål-bredd och -höjd i dimensionsfälten på beskärningsduken. Beskärningsramen ändrar storlek för att matcha och den direkta avläsningen bekräftar utdatastorleken i källpixlar. Utdata är alltid lika med markeringens källpixelmått. Verktyget skalar inte upp, om markeringen är mindre än ditt mål blir utdata också mindre.

Detaljerna

Anteckningar från teamet om hantverk, format och de små beslut som ligger bakom en bra rund beskärning.

Biblioteket cropperjs v2 och vad som ändrats från v1
Verktyget är byggt på cropperjs version 2.1.1, en fullständig omskrivning av det ursprungliga cropperjs-biblioteket. v2-utgåvan ersätter det gamla constructor-baserade API:et (new Cropper(img, { aspectRatio: 1 })) med en Web Components-arkitektur. Beskärningsduken, markeringsöverlägget och bildelementet är alla anpassade HTML-element som registrerats via webbläsarens CustomElementRegistry. Detta betyder att Shadow DOM hanterar alla interna stilar, ingen separat cropper.css-fil att importera, vilket eliminerar en Vite-resursförfrågan jämfört med v1. Förhållandelåset ställs nu in direkt på markeringselementet (cropperSelection.aspectRatio = 1) snarare än i constructorn, så förhållandet kan ändras under körning utan att hela beskärningsgränssnittet behöver initialiseras om. Biblioteket väger 41 960 byte rå och 12 175 byte gzip, mätt direkt från content-length-headern hos jsDelivr CDN. De 12 KB betalas en gång per session och återanvänds över alla förinställda beskärningsrutter via Vite chunk-uppdelning.
Hur utdatadimensioner i pixlar beräknas utan uppskalning
När du drar beskärningsmarkeringen på skärmen ligger koordinaterna du ser i källbildens pixelrymd, inte CSS-pixelrymd. Den här distinktionen är viktig för skärmar med hög pixeltäthet, en telefon med enhetspixelförhållande 3× visar en bild som är 300 CSS-pixlar bred som 900 verkliga pixlar, men markeringskoordinaterna återspeglar de 900 verkliga pixlarna, inte 300 CSS. Utdatafilen du laddar ner innehåller exakt det antal pixlar som markeringsrektangeln representerar i källbilden. Beskärningsoperationen anropar selection.toCanvas() från cropperjs v2-API:et, en asynkron metod som returnerar ett nytt HTMLCanvasElement i markeringens pixeldimensioner. Den duken skickas sedan till canvas.toBlob() för PNG, JPG eller WebP, eller till @jsquash/avif-kodaren för AVIF. Inget uppskalningssteg läggs in. Om din markering är 800 pixlar bred är utdatan 800 pixlar bred.
EXIF-metadataborttagning och vad som går förlorat
Varje export tar bort EXIF, IPTC, XMP och ICC-profilsdata. Detta sker på duk-pipelinenivå, webbläsaren ritar de avkodade bildpixlarna på HTMLCanvasElement och duken kodar till en ny fil. Duken har inget koncept av metadatabehållare, den lagrar bara pixelvärden och kodningsparametrar. Det som tas bort inkluderar GPS-koordinater, kameramärke och modell, linsens brännvidd, exponeringsinställningar, upphovsrättsfält och färgprofiltaggar. sRGB-färgprofilen är i praktiken det antagande som duken gör, färger renderas genom webbläsarens visningspipeline och kodas om utan någon bifogad profil. För de flesta webbpubliceringar och användning i sociala medier är borttagen EXIF att föredra eftersom GPS-data kan exponera platsinformation som användaren inte avsåg att dela. För professionella fotoarbetsflöden där färgprofilsprecision spelar roll, använd ett färghanterat exportverktyg.
Vad som händer när du beskär en animerad GIF
När du släpper en animerad GIF på beskärningsverktyget avkodar webbläsaren bara den första bildrutan till bildelementet som används av beskärningsduken. Detta är ett webbläsarbeteende, inte en begränsning hos cropperjs, HTMLImageElement exponerar inte enskilda bildrutor av en animerad GIF till JavaScript på ett sätt som duk-API:et kan iterera. Resultatet är att bara den första bildrutan är tillgänglig för beskärningsmarkeringen och den slutliga utdatan är en stillbild i vilket format du än väljer på slutförandeskärmen. Om indata är GIF och du väljer GIF som utdata inkluderar webbläsarens canvas.toBlob-implementation ingen GIF-kodare, så utdata faller tyst tillbaka till PNG. Verktyget avvisar explicit GIF som ett utdataformatval för att undvika den tysta nedgraderingen. Om du behöver beskära alla bildrutor i en animation behöver du ett verktyg som arbetar bildruta för bildruta, vilket detta verktyg inte stöder.
Tangentbordsnavigation och tillgänglighet
cropperjs v2-markeringselementet implementerar tangentbordsnavigation som en del av sin Web Component-specifikation. När du Tab:ar till beskärningsmarkeringen flyttar piltangenterna ramen en pixel i den tryckta riktningen. Shift plus en piltangent flyttar ramen tio pixlar. Detta är inbyggt tillgängligt utan en lösning för skärmläsare eller ett anpassat JavaScript-lager, tangentbordshanteraren bor inuti markeringselementets shadow root och triggas på keydown. Detta är viktigt för användare som förlitar sig på enbart tangentbordsnavigation, inklusive vissa assistiva teknologiinställningar, motoriska tillgänglighetsenheter och precisionsarbetsflöden där styrplattan inte tillförlitligt kan uppnå subpixel-justering. Den direkta pixelavläsningen som är knuten till markeringen uppdateras också vid varje tangenttryckning, så användare av skärmläsare med aria-live-regioner på avläsningen kan höra de aktuella dimensionerna ändras. Tangentbordstillgänglighet är ett område där detta verktyg ligger steget före iLoveIMG och img2go.
Formatvalsavvägningar efter beskärning
Formatväljaren på slutförandeskärmen ger fyra alternativ. PNG är förlustfri, varje pixel i beskärningsområdet lagras exakt som den avkodades från källan. Filstorleken är större än JPG för samma innehåll, vanligtvis tre till fem gånger större för ett foto. JPG tillämpar förlustfri komprimering vid kvalitet 0.9 (på en skala 0 till 1), vilket motsvarar ungefär förinställningen för hög kvalitet i de flesta skrivbordsredigerare. Vid q0.9 är skillnaden mellan originalet och utdatan i allmänhet inte synlig på en standardskärm men filen är betydligt mindre. WebP vid samma kvalitetsinställning producerar en fil ungefär 25 till 35 procent mindre än JPG i våra kodningstester, med samma perceptuella kvalitet på foton. WebP stöder också förlustfritt läge och bevarar transparens. AVIF vid kvalitet 0.9 via @jsquash/avif-biblioteket producerar minsta utdata av de fyra formaten, men den första kodningen i en session kräver nedladdning av en WASM-modul på 870 KB.