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är din bild i en cirkel online

Ladda upp en JPG, PNG, WebP eller AVIF och ladda ner en transparent cirkel som PNG, WebP eller AVIF.

eller dra bilden hit

Om det här verktyget

Beskär din bild i en cirkel direkt i webbläsaren. Dra en JPG, PNG, WebP eller AVIF till sidan och Cropper.js öppnar den på ett cirkulärt beskärningssteg. Flytta handtagen för att centrera motivet, skala cirkeln till önskad storlek och klicka på Spara. Webbläsaren exporterar resultatet som en transparent PNG, WebP eller AVIF, eller som en platt JPEG om du väljer en bakgrundsfärg, och laddar ner filen direkt till din enhet. Filer upp till 25 MB och 16 megapixlar accepteras. Verktyget fungerar lika bra på laptop, iPad och Android utan att installera en app. Nätverksfliken i DevTools visar inga utgående bildbegäranden under hela processen, så känsliga porträtt och interna logotyper stannar på din enhet. De flesta använder verktyget för att göra ett fyrkantigt foto till en cirkulär profilbild på LinkedIn, Discord, Slack eller Instagram, för att skapa runda logotyper och emblem, och för att förbereda avatarer åt ett helt team på några minuter.

Öppna cirkelbeskärningsverktyget
Hur man beskär bilder i cirkelform

Hur man beskär bilder i cirkelform

Dra en JPG, PNG, WebP eller AVIF till sidan och Cropper.js v2 laddar den i ett cirkulärt beskärningssteg. Ett mörkt överlager visar ytan som tas bort, och den ljusa cirkeln i mitten är det som blir kvar. Dra cirkeln för att centrera motivet, skala den med hörnhandtagen, eller nyp på en pekskärm. När inramningen känns rätt väljer du ett format och klickar på Spara. Webbläsaren kodar filen lokalt och utlöser en nedladdning. Öppna Nätverksfliken i DevTools medan du beskär och se den förbli tom. Ingen POST-begäran skickas under uppladdning, justering eller sparande.

Välj ett format och beskär
Välj utdataformat

Välj utdataformat

Fyra format finns i nedladdningsmenyn. PNG behåller ytan utanför cirkeln helt transparent och är det säkra standardvalet för profilbilder och logotyper. WebP stöder också transparens och är typiskt 25 till 35 procent mindre än PNG. AVIF är minst av de tre transparenta formaten, ofta hälften av WebP-storleken, men @jsquash/avif-kodaren tar cirka 3 sekunder på dator och upp till 30 sekunder på en mellanklassmobil. JPEG ger en platt cirkel på en solid bakgrundsfärg som du väljer. Formatet har ingen alfakanal, så transparens ersätts av fyllnadsfärgen. Välj PNG för tillförlitlighet, WebP för storlek, AVIF när bandbredd räknas, JPEG bara när målet avvisar transparenta filer.

Beskär för valfri social plattform
Runda bilder för varje plattform

Runda bilder för varje plattform

De flesta sociala plattformar renderar avatarer i en cirkulär ram, så förbeskärning låter dig styra vad som hamnar inuti. LinkedIn visar profilbilden vid 400 gånger 400 px på profilsidan och runt 48 px i flödet. Discord renderar användaravataren vid 128 gånger 128 i serverns medlemslistor och 32 gånger 32 i chatt. Instagram visar profilbilden cirkulärt vid ungefär 110 px på mobilprofilen och 32 px i flödestumnaglar. Slack använder 36 px i kanallistan. Verktyget exporterar i originalupplösning, så ändra storlek först via /resize/ om du behöver en exakt pixelstorlek. Det undviker uppskalningsartefakter.

Pröva inom gränserna
Vad det här verktyget inte gör

Vad det här verktyget inte gör

Filer över 25 MB eller större än 16 megapixlar avvisas med ett vänligt felmeddelande. Kontrollen sker på magic bytes och rubrikdimensioner, före avkodning, så ett foto på 50 megapixlar från en DSLR kraschar aldrig en mobilwebbläsare. HEIC-filer avkodas bara i Safari 17 och nyare, som exponerar createImageBitmap för formatet inbyggt. Chrome, Firefox och Edge returnerar ett avkodningsfel och verktyget föreslår konvertering till JPG först. Animerade GIF-filer exporterar bara den första bildrutan. AVIF-kodning är långsam på mobil, runt 30 sekunder för en indata på 8 megapixlar. Cirkelpositionen är alltid manuell. Det finns ingen AI-autodetektion av ansikten eller motiv.

Beskär i webbläsaren nu
Hur bilden stannar på din enhet

Hur bilden stannar på din enhet

Cropper.js ritar masken i webbläsarens Canvas-API. Kodningen körs också lokalt, via canvas.toBlob för PNG, WebP och JPEG, eller via @jsquash/avif-WASM-modulen för AVIF. Den nedladdade filen kommer från en blob-URL skapad med URL.createObjectURL, som pekar på minne som webbläsaren håller för din flik. Öppna DevTools, växla till Nätverksfliken, töm den, ladda sedan upp en bild och beskär. Ingen ny POST- eller PUT-begäran med bilddata visas. När du klickar på Spara blinkar en kort begäran till en blob: i panelen. Det är den lokala upplösningen, inte en uppladdning. Det fungerar likadant i Chrome, Firefox, Safari och Edge.

Skapa din runda profilbild
Rund profilbild för varje social plattform

Rund profilbild för varje social plattform

En profilbild spelar roll eftersom det är det första andra ser. De flesta plattformar renderar avatarer i en cirkel, så fyrkanten du laddar upp beskärs vid kanterna. Att göra beskärningen själv styr vad som blir kvar inuti cirkeln och vad som faller bort. Samma sak gäller runda logotyper för ett varumärke, teamfoto-emblem i en katalog, serverikoner på Discord och dekalkonst. En sak värd att notera: ett porträtt läser bättre med en liten marginal runt huvudet, inte en tight beskärning precis vid hårfästet. Centrera ögonen lite ovanför mitten av cirkeln och resultatet ser balanserat ut vid varje renderingsstorlek.

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

  1. Dra din bild till sidan

    Klicka på uppladdningsytan eller dra en JPG-, PNG-, WebP-, AVIF- eller GIF-fil direkt till sidan. Det cirkulära beskärningssteget öppnas automatiskt.

  2. Placera cirkeln över motivet

    Dra cirkeln för att centrera ansiktet eller logotypen. Nyp eller scrolla för att skala tills inramningen ser rätt ut.

  3. Välj utdataformat

    Välj PNG eller WebP för en transparent cirkel, AVIF för den minsta filen, eller JPEG om du behöver en solid bakgrundsfärg.

  4. Klicka på Spara och ladda ner filen

    Webbläsaren kodar resultatet lokalt och laddar ner det till din enhet. Filnamnet behåller originalnamnet med -circle tillagt.

Behöver du en rektangel, inte en cirkel?

Det här verktyget levererar en form, cirkeln. För rektanglar med fritt förhållande, använd beskär bild. För Instagram-flöde (1080 gånger 1080), använd beskär till kvadrat eller ett av per-plattform-beskärningsverktygen.

Beskär bild Andra beskärningsverktyg

Vanliga frågor

Hur beskär jag en bild till cirkelform?

Dra din bild till beskärningssteget. Verktyget accepterar JPG, PNG, WebP, AVIF, GIF och BMP. Cropper.js öppnar den med ett cirkulärt urval redan centrerat. Dra cirkeln för att rama in motivet, justera storleken med hörnhandtagen eller en nyprörelse, klicka sedan på Spara. Webbläsaren kodar och laddar ner en transparent PNG som standard. Hela processen tar under 30 sekunder för ett typiskt foto.

Hur skapar jag en cirkulär profilbild?

Ladda upp ditt foto, centrera cirkeln runt ansiktet eller motivet och exportera som PNG eller WebP. Transparent bakgrund innebär att plattformens egen bakgrundsfärg syns igenom rent. De flesta sociala plattformar visar profilbilder i en cirkulär ram. Genom att beskära bilden själv styr du exakt vad som syns inuti cirkeln, i stället för att låta plattformen autobeskära. Exportera i originalupplösning för skarpast möjliga resultat.

Kan jag beskära foton till runda former på min telefon?

Verktyget fungerar i alla moderna webbläsare på iPhone, iPad och Android-telefoner. Handtagen svarar på touch och nyprörelser. Den viktigaste begränsningen på mobil är AVIF-kodningstiden. Ett högupplöst foto kan ta 30 sekunder eller mer, eftersom WASM-kodaren körs på processorn. PNG och WebP är mycket snabbare och fungerar bra på mellanklassmobiler.

Lagrar ni de bilder jag laddar upp?

Öppna DevTools i din webbläsare (F12), gå till Nätverksfliken och ladda upp en bild. Inga POST- eller PUT-begäranden med bilddata visas under uppladdning eller beskärning. Cropper.js kör beskärningen i webbläsarens Canvas-API. Den nedladdade filen hämtas från en lokal blob-URL, inte från en server. Webbläsarfliken kan stängas utan att något skickas vidare.

Vilka bildformat kan jag använda med cirkelbeskärningsverktyget?

Indata accepterar JPG, PNG, WebP, AVIF, GIF (bara den första bildrutan, animation bevaras inte), BMP och SVG. HEIC fungerar i Safari, eftersom Safari hanterar det inbyggt via createImageBitmap. I Chrome, Firefox och Edge avvisas HEIC-filer. Formatkontrollen sker via magic bytes, inte filnamnets ändelse, så en omdöpt fil identifieras ändå korrekt.

Kommer min cirkelbeskurna bild att ha transparent bakgrund?

Ja, om du exporterar som PNG, WebP eller AVIF. Alla tre formaten stöder en alfakanal, så ytan utanför cirkeln är helt transparent. I de flesta designverktyg och meddelandeappar visas transparent bakgrund som ett schackrutemönster. JPEG saknar transparensstöd. Om du väljer JPEG uppmanas du att ange en fyllnadsfärg för ytan utanför cirkeln.

Detaljerna

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

Hur Cropper.js v2 ritar cirkelmasken
Cropper.js v2 levereras som en Web Component. Elementen cropper-canvas, cropper-image och cropper-handle bygger upp scenen. Den cirkulära beskärningen är inte ett CSS border-radius-trick. Det är en canvas-kompositoperation (destination-in) som tillämpas vid export. Användaren ser hela bilden med ett mörkt överlager, och det cirkulära urvalsområdet beräknas i realtid från handtagens positioner i komponentens interna tillstånd. När Spara klickas skapas en tillfällig canvas i de valda måtten, bilden ritas på den och kompositmasken tar bort allt utanför cirkeln. För PNG, WebP och AVIF innehåller resultatet en alfakanal. För JPEG fylls de transparenta pixlarna med en solid färg före kodning, eftersom JPEG saknar alfakanalspecifikation. Cropper.js v2 distribueras under MIT-licens på github.com/fengyuanchen/cropperjs.
PNG, WebP, AVIF och JPEG för cirkelbeskärningar
PNG är förlustfri och universellt stödd. En 512 gånger 512 cirkelexport från ett 8 megapixelsfoto landar i snitt på 180 till 350 KB beroende på fotots komplexitet. WebP är visuellt förlustfri vid kvalitet 85 till 90, 25 till 40 procent mindre än PNG, och stöds av alla webbläsare som släppts efter 2023. AVIF använder AV1-intrakodning, typiskt 40 till 50 procent mindre än WebP vid motsvarande visuell kvalitet, men @jsquash/avif-WASM-kodaren tar längre tid. Cirka 3 sekunder på dator och upp till 30 sekunder på en mellanklassmobil för en indata på 8 megapixlar. JPEG kodas snabbast, runt 400 ms på dator, men formatet har ingen alfakanal. Använd JPEG bara när målplattformen avvisar transparenta filer, vilket händer med vissa Slack-integrationer och vissa e-postklienter. De flesta bör välja PNG för tillförlitlighet eller WebP för storlek.
Plattformsstorleksguide för cirkulära avatarer
Olika plattformar renderar avatarer i olika storlekar inuti den cirkulära masken. LinkedIn: profilbild vid minst 400 gånger 400 px, visad i en cirkel på profilsidan och runt 48 px i flödet. Discord: guildikon vid max 512 gånger 512, användaravatar vid 128 gånger 128 i serverns medlemslistor och 32 gånger 32 i chatt. Instagram: profilbild cirkulär vid ungefär 110 px på mobilprofil, 32 px i flödestumnaglar. Slack: arbetsyteavatar upp till 512 gånger 512, renderad cirkulärt i kanallistan vid cirka 36 px. Verktyget exporterar i fotots originalupplösning. Om du behöver en exakt utdatamått ändrar du storlek på bilden först via /resize/ innan du kör cirkelbeskärningen. Det ger pixelkorrekt utdata utan uppskalningsartefakter.
HEIC och Safari-begränsningen förklarad
HEIC är Apples containerformat med HEVC-komprimering. Safari 17 och nyare hanterar HEIC inbyggt via createImageBitmap, vilket är varför cirkelbeskärning av ett iPhone-foto fungerar i Safari utan något konverteringssteg. Chrome, Firefox och Edge implementerar inte createImageBitmap för HEIC per 2026. De returnerar ett avkodningsfel. Verktyget kontrollerar magic bytes vid uppladdning. Om en HEIC-fil detekteras i en icke-Safari-webbläsare visas ett vänligt felmeddelande som föreslår konvertering till JPG först. Lösning för användare av icke-Safari-webbläsare: öppna fotot på en iPhone i appen Foton och dela som JPG (finns i delningsmenyn), eller använd /heic-to-jpg/ om du redan har en HEIC-fil på en dator. Notera att en .heic-fil som döpts om till .jpg ändå avvisas, eftersom magic-byte-kontrollen fångar omdöpningen.
Varför ytan utanför cirkeln är transparent
När du exporterar en PNG- eller WebP-cirkelbeskärning har pixlarna utanför cirkelgränsen ett alfavärde på 0, alltså helt transparent. På plattformar som renderar avatarer i en cirkulär ram blir den transparenta bakgrunden osynlig och plattformens egen bakgrundsfärg syns igenom rent. På plattformar som visar filen i full storlek, som en förhandsgranskning av en bilaga eller en fotoalbumsvy, visas den transparenta ytan som ett schackrutemönster. Om du klistrar in cirkeln i ett designverktyg som Figma eller Canva kan du lägga den ovanpå vilken färg som helst utan en vit kantartefakt. JPEG-alternativet finns för fall där transparens skapar problem. Vissa e-postklienter, vissa CMS-bilduppladdare och vissa äldre plattformar tar bort transparens och ersätter den med svart. Att använda JPEG med en vald fyllnadsfärg undviker det.
Verifiera bearbetning i webbläsaren via Nätverksfliken
Vem som helst kan verifiera ingen-uppladdning-påståendet praktiskt. Öppna webbläsarens DevTools (F12 eller högerklicka och välj Granska), gå till Nätverksfliken, klicka på Rensa för att ta bort tidigare poster, ladda sedan upp en bild till cirkelbeskärningsverktyget och dra handtagen. Titta på Nätverksfliken under uppladdningen och under själva beskärningen. De enda begäranden som visas är för sidtillgångar (JS, CSS, typsnitt) som laddades innan uppladdningen. Ingen ny POST- eller PUT-begäran med bilddata dyker upp. Efter att du klickat på Spara visas en enda begäran till en blob:-URL i fliken under ett ögonblick. Det är webbläsaren som löser den lokala blob-referensen, inte data som skickas till en server. Verifieringen fungerar i Chrome, Firefox, Safari och Edge.