Arrodonir Cantonades d'Imatge

Feu clic per pujar una imatge

JPG / PNG / WEBP

Predefinit de radi

Radi del arc

20%
050%

Format de sortida

Puja una imatge per mostrar la vista prèvia

Afegeix cantonades arrodonides a qualsevol imatge en línia. Tria un predefinit o arrossega el control lliscant, previsualitza en temps real i exporta un PNG transparent que s'adapti a qualsevol fons, tot processat localment al navegador.

Relacionats

Generador ICO

Retallar imatges

Redimensionar imatges

Comprimir imatges

Convertir imatges

Què és l'arrodoniment de cantonades d'imatge?

L'arrodoniment de cantonades d'imatge substitueix els quatre cantons rectes d'una imatge per arcs suaus. Aquesta eina utilitza l'arcTo() del Canvas per dibuixar un camí de rectangle arrodonit i, tot seguit, crida clip() per retallar la imatge en aquesta regió. L'àrea no retallada es converteix en píxels transparents (Alpha=0) en exportar a PNG.

**Per què fer servir cantonades arrodonides?** Les cantonades arrodonides semblen més suaus i amigables que les rectes, i redueixen la duresa visual. S'utilitzen àmpliament en icones d'aplicació, botons, targetes i avatars. La superel·lipse d'iOS (squircle) porta això més enllà amb corbes més suaus.

**Per què moltes icones d'aplicació requereixen cantonades arrodonides?** Des d'iOS, iPadOS i macOS Big Sur, el sistema aplica automàticament una màscara arrodonida a les icones d'aplicació, cosa que pot generar una vora blanca visible si la font té fons blanc. La solució és preexportar un PNG arrodonit des de la imatge original perquè el sistema no la remasqui, i per això existeix aquesta eina.

**Píxels vs percentatges:** Els píxels són precisos, però costa d'alinear entre imatges; els percentatges s'adapten a mides diferents. Els sistemes de disseny solen fer servir percentatges, com ara 22,37 % per a icones iOS i 25 % per a Android Adaptive Icon.

**Diferència amb CSS border-radius:** El CSS border-radius és un efecte de capa de visualització, de manera que la imatge exportada encara té cantonades rectes. Aquesta eina genera un PNG real amb canal Alfa, que es pot utilitzar en qualsevol entorn sense suport CSS (com PowerPoint, vídeo i impressió).

Casos d'ús

  • Crea fotos de perfil per a missatgeria i xarxes socials (WhatsApp, Telegram, X, Instagram, Facebook) i genera cercles perfectes amb un sol clic
  • Afegeix cantonades arrodonides a icones d'aplicació ràpidament (iOS 22–25 %, Android Adaptive Icon 25 %)
  • Suavitza les cantonades de les imatges principals de comerç electrònic per augmentar la taxa de clics i conversió
  • Processa localment actius d'imatge amb cantonades arrodonides per a diapositives de PowerPoint, edició de vídeo i impressió
  • Estandardaritza conjunts d'icones i actius de disseny amb cantonades coherents per al teu sistema de disseny (processant un per un)

Com usar-ho

  1. Fes clic a la zona de càrrega per seleccionar una imatge, o arrossega directament un fitxer JPG, PNG o WEBP
  2. Tria un predefinit Petit (10 %), Mitjà (25 %) o Gran (50 %) per a cantonades instantànies, o arrossega el control lliscant a un valor personalitzat (fes clic per canviar entre percentatge i píxels)
  3. Selecciona el format de sortida: PNG (fons transparent), WEBP (més petit) o JPG (fons blanc, sense transparència)
  4. Previsualitza el resultat a la dreta i fes clic a Descarregar per desar el fitxer amb el sufix automàtic -rounded

Característiques

  • Doble unitat: commuta lliurement entre píxels (0–500 px) i percentatges (0–50 %) per al radi de la cantonada
  • 3 predefinits: Petit (10 %), Mitjà (25 %), Gran (50 %) amb un sol clic, més un control lliscant personalitzat
  • 3 formats de sortida: exporta com a PNG (amb transparència), WEBP (mida més petita) o JPG (fons blanc)
  • Previsualització en temps real: ajusta el control lliscant i veu l'efecte a l'instant, amb un fons d'escacs que mostra la transparència
  • Arrossega i deixa anar: fes clic per seleccionar o arrossega imatges JPG, PNG o WEBP directament a la zona de càrrega
  • Processament local: tot funciona al Canvas del navegador, la imatge no surt del teu dispositiu

Best Practices

Tria PNG per sobre de JPG quan necessitis transparència

JPG no admet el canal Alfa. Si tries JPG, les cantonades s'ompliran de blanc i apareixeran blocs blancs no desitjats. Tria JPG només quan estiguis segur que no necessites transparència; en cas contrari, deixa PNG com a opció per defecte.

Tria WEBP per a actius transparents que hagin de ser petits

WEBP admet transparència i és un 25–35 % més petit que PNG, ideal per a actius web. Alguns programes de disseny antics no reconeixen WEBP, així que prioritza PNG quan col·laboris entre eines.

Com triar el radi de cantonada per a la icona d'una aplicació

iOS aplica automàticament aproximadament un 22,37 % de radi a les icones d'aplicació, però un fons blanc a la imatge original provoca una vora blanca visible. La solució és generar prèviament un PNG arrodonit amb aquesta eina (es recomana 22–25 %). Per a Android Adaptive Icon, 25 % és un radi segur.

Fes servir el radi 50 % per generar un avatar circular perfecte

La majoria de xarxes socials (WhatsApp, Telegram, X, Instagram, etc.) mostren els avatars com un cercle perfecte. El predefinit 50 % crea un PNG circular transparent amb un sol clic, apte per a temes clars i foscos.

Directrius d'icones d'aplicació iOS

No apliquis CSS border-radius a sobre de la imatge arrodonida exportada

Quan hagis exportat un PNG arrodonit amb aquesta eina, no el posis dins d'un contenidor amb CSS border-radius + overflow:hidden, ja que les vores es processaran dues vegades i es veuran borroses. Mostra la imatge arrodonida amb una etiqueta img senzilla.

Necessites una forma més complexa (radi per cantonada, només a la part superior)?

Aquesta eina només admet cantonades iguals als quatre costats. Per a radi només a la part superior, només a la inferior o diferent per cantonada (TabBar, pantalles d'inici), utilitza l'editor d'imatges o una eina de disseny com Figma.

Preguntes freqients

Com afegir cantonades arrodonides a una imatge?

Després de carregar la imatge, fes clic als predefinits Petit, Mitjà o Gran per arrodonir ràpidament, o arrossega el control lliscant per definir un valor personalitzat en píxels (0–500 px) o percentatge (0–50 %). El panell dret mostra el resultat en temps real. Quan estiguis satisfet, fes clic a Descarregar; el fitxer es desarà amb el sufix automàtic -rounded.

És millor utilitzar píxels o percentatges per al radi de la cantonada?

Els píxels ofereixen un control precís i funcionen bé per a actius de mida fixa. Els percentatges s'escalen segons el costat més curt de la imatge i s'adapten a mides diferents. Aquesta eina permet canviar la unitat amb un sol clic, i el 50 % sempre genera un cercle perfecte, ideal per a fotos de perfil.

Què passa amb l'àrea arrodonida?

Amb la sortida PNG o WEBP, l'àrea arrodonida és totalment transparent (Alpha=0) i es fon amb qualsevol fons. Amb la sortida JPG l'àrea s'omple de blanc (apareix un avís groc a la interfície); usa JPG només quan la transparència no sigui necessària.

Quins formats d'imatge s'admeten?

L'entrada admet JPG, PNG i WEBP. La sortida pot ser PNG (transparent), WEBP (més petit) o JPG (fons blanc). El fitxer descarregat rep automàticament el sufix -rounded per diferenciar-lo de l'original.

Quins són els límits del radi de la cantonada?

El mode percentatge va de 0 a 50 % (50 % genera un cercle perfecte), el mode píxels de 0 a 500 px. Com més gran sigui el valor, més arrodonida serà la cantonada. L'eina utilitza Canvas arcTo + clip per a cantonades circulars estàndard, no superel·lipses Squircle.

Puc crear avatars o icones d'aplicació?

Sí. Per a un avatar circular perfecte utilitza el predefinit 50 %. Per a icones d'iOS es recomana 22–25 % (usa el predefinit 25 % per coincidir amb un sol clic). Per a Android Adaptive Icon, 25 % és un radi segur. La sortida PNG amb transparència s'adapta a qualsevol tema.

L'arrodoniment fa que la imatge quedi borrosa?

No. L'eina treballa a la resolució original mitjançant el retall per camí al Canvas, sense remostreig ni compressió. La qualitat de la sortida és idèntica a la de l'original; només es retallen les cantonades i les vores es mantenen nítides.

La meva imatge s'envia a un servidor?

No. Tot passa localment al navegador a través de l'API Canvas. La imatge no s'envia a cap servidor i s'elimina quan surts de la pàgina. Les fotos personals, les còpies escanejades de documents i els actius sensibles es poden processar de manera segura.

Per què no es mostra l'efecte d'arrodoniment?

Comprova: ① el valor del radi és superior a 0 (el control lliscant no és a l'extrem esquerre); ② la imatge s'ha carregat correctament (ha de ser JPG, PNG o WEBP); ③ el teu navegador admet HTML5 Canvas (tots els moderns ho fan). Si el problema continua, actualitza la pàgina i torna a carregar.

Quina diferència hi ha amb CSS border-radius?

CSS border-radius només funciona a la capa de visualització del navegador i no aplica la cantonada al fitxer d'imatge. Aquesta eina exporta un PNG real amb canal Alfa, de manera que la imatge arrodonida funciona a PowerPoint, edició de vídeo, impressió i qualsevol entorn sense suport CSS.

Glossari

Radi de la cantonada (Border Radius)
El radi de l'arc de la cantonada arrodonida. Valors més grans generen cantonades més arrodonides; el màxim és la meitat del costat més curt de la imatge, cosa que produeix un cercle perfecte. Aquesta eina admet píxels (0–500 px) i percentatges (0–50 %) com a unitat.
Canal Alfa
El canal de transparència integrat a PNG i WEBP, amb valors 0–255 per píxel. L'eina defineix els píxels de les cantonades arrodonides com a Alpha=0, produint una sortida completament transparent que es fon amb qualsevol fons.
Squircle (superel·lipse)
Forma d'arrodoniment introduïda a iOS 7+ que és més suau que una cantonada estàndard, seguint l'equació x⁴+y⁴=r⁴. Aquesta eina genera arcs estàndard; utilitza Figma o Sketch si necessites un Squircle.
Adaptive Icon
Format d'icona d'Android 8.0+ amb capes separades de primer pla i fons. Un radi del 25 % és l'àrea segura; el llançador de l'OEM aplica la seva pròpia màscara (cercle, squircle, etc.).
Canvas arcTo
Mètode de l'API Canvas 2D per dibuixar un arc. Aquesta eina fa servir arcTo + clip per construir el camí del rectangle arrodonit, retallar la imatge dins seu i fer transparent l'exterior en exportar.

Referència ràpida de radi de cantonada per plataforma

Plataforma / ElementMida de referènciaRadi recomanatAprox. (px)
Icona d'aplicació iOS / iPadOS1024 × 1024Aproximadament 22,37 %≈ 229 px
Android Adaptive Icon108 × 108Aproximadament 25 %≈ 27 px
Icona d'aplicació macOS Sonoma1024 × 1024Superel·lipse SquircleSense px fix
Targeta Windows 11—Aproximadament 8 px8 px
Material Design 3 Large—Aproximadament 28 px28 px
Avatar WhatsApp / Telegram640 × 64050 % (cercle perfecte)320 px
Avatar Twitter / Instagram400 × 40050 % (cercle perfecte)200 px
Imatge principal e-commerce800 × 80016–24 px recomanat16-24 px

Authoritative References