Retalla qualsevol foto en cercle al navegador

Carrega un JPG, PNG, WebP o AVIF i descarrega un cercle transparent en pocs segons.

o deixa-hi anar la imatge

Sobre aquesta eina

Retalla qualsevol foto en cercle perfecte directament al teu navegador. Carrega un JPG, PNG, WebP o AVIF a la pàgina i Cropper.js l'obre en una etapa de retall circular. Arrossega les nanses per centrar el teu subjecte, escala el cercle fins a la regió que vols i fes clic a Desa. El navegador codifica el resultat com un PNG, WebP o AVIF transparent, o bé com un JPEG pla si tries un color de fons, i el descarrega directament al teu dispositiu. La pestanya Xarxa de les eines de desenvolupament no mostra cap petició d'imatge sortint durant tot el procés. Accepta fitxers d'entrada de fins a 25 MB i 16 megapíxels. L'eina funciona en ordinadors i mòbils sense instal·lar res. La majoria d'usuaris la fan servir per fer que una foto de perfil es vegi bé en els espais d'avatar circular de LinkedIn, Discord, Slack i Instagram.

Obre l'eina de retall circular
Com retallar una foto en cercle

Com retallar una foto en cercle

Arrossega un JPG, PNG, WebP o AVIF a la pàgina i Cropper.js v2 el carrega en una etapa circular amb màscara. Una superposició fosca mostra el que quedarà fora del cercle, i el cercle ja apareix centrat sobre la imatge. Arrossega el cercle per moure'l per damunt del teu subjecte. Fes servir les nanses cantoneres o un gest de pinça al mòbil per escalar la selecció fins a l'enquadrament que vols. Quan fas clic a Desa, el navegador codifica el cercle i descarrega el fitxer al teu dispositiu. La pestanya Xarxa de les Eines de Desenvolupament no mostra cap petició POST sortint mentre retalles.

Tria un format i retalla
Tria el format de sortida

Tria el format de sortida

El menú de descàrrega ofereix quatre opcions, cadascuna pensada per a un cas d'ús diferent. PNG produeix un cercle amb fons transparent i és ideal per a logotips i avatars. WebP fa el mateix amb un fitxer típicament un 25 a 40% més petit i ja és compatible amb tots els navegadors moderns. AVIF és encara més petit, també transparent, però codifica lentament al mòbil: pot arribar a 30 segons en un telèfon de gamma mitjana segons la documentació del codificador. JPEG genera un cercle pla amb el color de fons que tu tries. No admet transparència. Fes servir JPEG només si la plataforma de destinació rebutja imatges transparents.

Retalla per a qualsevol xarxa social
Fotos rodones per a cada plataforma

Fotos rodones per a cada plataforma

Les xarxes socials mostren fotos de perfil dins d'un marc circular, però cadascuna les renderitza a una mida diferent. LinkedIn mostra la foto de perfil a un mínim de 400 per 400 píxels al perfil i a uns 48 píxels al feed. Discord renderitza la icona de servidor fins a 512 per 512, i l'avatar d'usuari a 128 per 128 a la llista de membres. Instagram mostra la foto de perfil a uns 110 píxels al mòbil. Slack fa servir uns 36 píxels per als avatars de canal. L'eina exporta el cercle a la resolució original de la teva imatge. Si necessites una mida exacta en píxels, redimensiona la imatge primer i després torna aquí per al retall circular.

Prova-ho dins dels límits
Què no pot fer aquesta eina

Què no pot fer aquesta eina

Els fitxers d'entrada estan limitats a 25 MB i 16 megapíxels. Si superes el límit, l'eina mostra un missatge d'error amigable abans de carregar res. HEIC només funciona a Safari, perquè la resta de navegadors no descodifiquen aquest format de contenidor d'Apple el 2026. A Chrome, Firefox i Edge cal convertir el fitxer a JPG primer. Els GIF animats es carreguen, però només s'exporta el primer fotograma. La codificació AVIF és lenta al mòbil, fins a uns 30 segons per a una entrada de 8 megapíxels. L'eina no detecta cares ni subjectes de manera automàtica. Tu enquadres el cercle a mà.

Retalla al teu navegador ara
Com la teva imatge es processa al navegador

Com la teva imatge es processa al navegador

Cropper.js v2 executa el retall dins de l'API Canvas del navegador. La codificació de sortida, ja sigui amb canvas.toBlob per a PNG, WebP i JPEG, o amb @jsquash/avif per a AVIF, també s'executa al navegador. Pots verificar-ho tu mateix: obre les Eines de Desenvolupador i ves a la pestanya Xarxa abans de carregar una foto. Mentre arrossegues el cercle i exportes el resultat, no apareix cap petició POST ni PUT amb dades d'imatge. El fitxer descarregat prové d'una URL local de tipus blob generada amb URL.createObjectURL. Aquesta observació es repeteix a Chrome, Firefox, Safari i Edge.

Crea la teva foto de perfil rodona
Foto de perfil rodona per a cada xarxa social

Foto de perfil rodona per a cada xarxa social

Quan puges una foto quadrada a LinkedIn, Discord, Slack o Instagram, la plataforma la retalla automàticament a un cercle. Sovint això talla part de la cara o deixa massa espai buit al marc. Retallar el cercle tu mateix abans de pujar et dona control sobre què queda dins del marc. El mateix s'aplica a logotips rodons per a marca, insígnies de fotos d'equip i icones de servidor de Discord. Un consell pràctic: una foto de perfil amb el subjecte centrat i una mica d'espai al voltant del cap es llegeix millor a mides petites que un retall massa ajustat. Per a fotos d'equip rodones, manté el mateix marge de capçal a tots els membres perquè la quadrícula es vegi coherent.

Com retallar una foto en cercle

  1. Carrega la teva imatge a la pàgina

    Fes clic a l'àrea de càrrega o arrossega un fitxer JPG, PNG, WebP, AVIF o GIF directament a sobre. L'etapa de retall circular s'obre automàticament.

  2. Posiciona el cercle sobre el teu subjecte

    Arrossega el cercle per centrar la cara o el logotip. Fes pinça o fes scroll per escalar-lo fins que l'enquadrament et sembli correcte.

  3. Tria un format de sortida

    Selecciona PNG o WebP per a un cercle transparent, AVIF per al fitxer més petit, o JPEG si necessites un color de fons sòlid.

  4. Fes clic a Desa i descarrega el fitxer

    El navegador codifica el resultat localment i el descarrega al teu dispositiu. El nom del fitxer manté el nom original amb -circle afegit.

Necessites un rectangle, no un cercle?

Aquesta eina ofereix una forma, el cercle. Per a rectangles amb relació lliure fes servir retall d'imatge. Per al feed d'Instagram (1080 per 1080) fes servir retall quadrat o una de les eines de retall per plataforma.

Preguntes freqüents

Com retallar imatge en cercle en línia?

Carrega la teva imatge a l'etapa de retall (JPG, PNG, WebP, AVIF, GIF o BMP). Cropper.js l'obre amb una selecció circular ja centrada a la imatge. Arrossega el cercle per enquadrar el teu subjecte, ajusta la mida amb les nanses cantoneres o un gest de pinça, i fes clic a Desa. El navegador codifica i descarrega un PNG transparent per defecte. Tot el procés triga menys de 30 segons per a una foto típica.

Quins formats d'imatge puc descarregar?

El menú de descàrrega ofereix quatre opcions. PNG preserva la transparència fora del cercle i és l'opció per defecte. WebP és típicament un 25 a 35% més petit que PNG i també admet fons transparent. AVIF és el més petit dels tres formats transparents, però pot trigar fins a 30 segons a codificar en un telèfon de gamma mitjana. JPEG produeix un cercle pla amb un color de fons que tries tu i no admet transparència.

Quins són els passos per retallar la circular imatge?

El flux té quatre passos: carrega el fitxer (arrossega o fes clic), posiciona el cercle arrossegant les nanses, tria el format de sortida (PNG, WebP, AVIF o JPEG) i fes clic a Desa. El navegador codifica el resultat localment i el descarrega. No cal configuració addicional ni cap extensió.

Per què algú podria voler retallar un imatge en una forma circular?

La majoria de plataformes mostren fotos de perfil, avatars i icones de servidor dins d'un marc circular. Pujar una foto quadrada i deixar que la plataforma la retalli automàticament sovint talla la cara del subjecte o deixa espai buit al marc. Retallar en cercle tu mateix et permet controlar exactament el que es veu dins del cercle abans de pujar. El mateix s'aplica a logotips rodons, insígnies de fotos d'equip i art d'adhesius.

Què és un retall circular imatge?

Un retall circular és una imatge on l'àrea fora d'un cercle és transparent (per a PNG, WebP, AVIF) o plana amb un color de fons (per a JPEG). El resultat és una foto rodona que pots col·locar sobre qualsevol fons en eines de disseny com Figma o Canva, o pujar directament a plataformes que mostren avatars en forma circular.

Com deso el imatge retallat circular després d'haver acabat?

Quan fas clic a Desa, el navegador genera el fitxer localment i inicia la descàrrega automàticament. El fitxer es desa a la carpeta de descàrregues del teu dispositiu amb el nom original i -circle afegit. No cal crear cap compte ni confirmar cap correu electrònic.

Els detalls

Notes de l'equip sobre artesania, formats i les petites decisions darrere d'un bon retall rodó.

Com Cropper.js v2 dibuixa la màscara circular
Cropper.js v2 s'ofereix com un conjunt de Web Components (cropper-canvas, cropper-image, cropper-handle). El retall circular no és un truc de border-radius en CSS. És una operació de composició en canvas amb mode destination-in aplicada en el moment d'exportació. L'usuari veu la imatge completa amb una superposició fosca i la regió circular es calcula en temps real a partir de les posicions de les nanses, emmagatzemades a l'estat intern del component. Quan fas clic a Desa, es crea un canvas temporal amb les dimensions seleccionades, la imatge s'hi dibuixa i la màscara composta elimina tot el que queda fora del cercle. Per a PNG, WebP i AVIF el resultat inclou un canal alfa. Per a JPEG els píxels transparents s'omplen amb un color sòlid abans de la codificació, perquè JPEG no defineix un canal alfa. Llicència MIT, GitHub fengyuanchen/cropperjs.
PNG, WebP, AVIF o JPEG per a retalls circulars
PNG és sense pèrdua, compatible universalment i amb fitxers més grans. Una exportació circular de 512 per 512 píxels a partir d'una entrada de 8 megapíxels acostuma a pesar entre 180 i 350 KB. WebP és visualment sense pèrdua a qualitats entre 85 i 90, un 25 a 40% més petit que PNG, i tots els navegadors moderns el suporten des de 2023. AVIF utilitza codificació intra d'AV1 i és típicament un 40 a 50% més petit que WebP a qualitat visual equivalent, però el codificador WASM @jsquash/avif triga uns 3 segons en un ordinador i fins a 30 segons en un telèfon de gamma mitjana per a una entrada de 8 megapíxels. JPEG és el més ràpid de codificar (uns 400 mil·lisegons) però no admet transparència. La majoria d'usuaris haurien d'escollir PNG per fiabilitat o WebP per mida.
Guia de mides per plataforma. Què vol dir avatar circular a cada lloc
LinkedIn mostra la foto de perfil a un mínim de 400 per 400 píxels a la pàgina de perfil i a uns 48 píxels al feed. Discord representa la icona del servidor fins a 512 per 512 píxels i l'avatar d'usuari a 128 per 128 a la llista de membres, 32 per 32 al xat. Instagram mostra la foto de perfil a uns 110 píxels al perfil mòbil i a 32 píxels a les miniatures del feed. Slack puja avatars d'espai de treball fins a 512 per 512 i els mostra a uns 36 píxels a la llista de canals. L'eina exporta a la resolució original de la teva foto. Si necessites una mida de sortida exacta, redimensiona la imatge primer a /resize/ i després torna aquí per al retall circular.
HEIC i la limitació de Safari, explicada
HEIC és el format contenidor d'Apple basat en compressió HEVC. Safari 17 i posteriors gestionen HEIC de manera nativa a través de createImageBitmap, per això el retall circular d'una foto d'iPhone funciona a Safari sense conversió prèvia. Chrome, Firefox i Edge no implementen createImageBitmap per a HEIC el 2026 i retornen un error de descodificació. L'eina llegeix els bytes màgics en carregar i, si detecta un fitxer HEIC en un navegador que no és Safari, mostra un missatge d'error que suggereix convertir el fitxer a JPG primer. Per als usuaris que no fan servir Safari, la solució alternativa més ràpida és obrir la foto a l'app Fotos de l'iPhone i compartir-la com a JPG des del full de compartir. Un fitxer .heic reanomenat com .jpg continuarà sent rebutjat, perquè la verificació de bytes detecta el canvi de nom.
Per què l'àrea fora del cercle és transparent i per què importa
Quan exportes un retall circular en PNG o WebP, els píxels fora del límit del cercle tenen un valor alfa de 0, és a dir, completament transparents. A les plataformes que mostren avatars en un marc circular, aquest fons transparent es fa invisible i el color de fons propi de la plataforma es veu netament. A les plataformes que mostren el fitxer a mida completa, com una previsualització d'adjunt, l'àrea transparent es veu com un tauler d'escacs. Si enganxes el cercle en una eina de disseny com Figma o Canva, pots superposar-lo sobre qualsevol color sense halo blanc. L'opció JPEG existeix per als casos en què la transparència crea problemes. Alguns clients de correu, alguns gestors de càrrega de CMS i algunes plataformes antigues eliminen la transparència i la substitueixen per negre.
Verifica el processament al navegador amb la pestanya Xarxa
Obre les Eines de Desenvolupador del navegador amb F12 o clic dret i Inspecciona. Ves a la pestanya Xarxa i fes clic a Esborra per eliminar les entrades anteriors. Carrega una imatge a l'eina de retall circular i comença a arrossegar les nanses. Les úniques peticions que apareixen són per als recursos de la pàgina (JS, CSS, fonts) carregats abans de la càrrega de la imatge. No apareix cap nova petició POST ni PUT amb dades d'imatge. Després de fer clic a Desa apareix una sola petició a una URL blob: per un breu instant, que és el navegador resolent el blob local, no enviant res a un servidor. Aquesta verificació es pot fer a Chrome, Firefox, Safari i Edge.