Coins Arrondis Image

À propos de GeekFormat

Cliquez pour télécharger une image

JPG / PNG / WEBP

Préréglage de courbure

Rayon de courbure

20%

050%

Format de sortie

Téléversez une image pour afficher l'aperçu

Ajoutez des coins arrondis à vos images en ligne, aperçu en temps réel avec le curseur, 3 préréglages petit/moyen/grand, export PNG transparent adapté à tous les fonds.

Recommandations connexes

Generateur ICO

Recadrer Image

Redimensionner une image

Compresser des images

Convertir Image

Qu'est-ce que l'arrondi des coins d'images ?

L'arrondi des coins est la technique qui remplace les 4 angles droits d'une image par des arcs doux. Cet outil dessine des chemins de rectangle arrondi via arcTo() de Canvas, puis utilise clip() pour recadrer l'image : les zones non remplies deviennent des pixels transparents Alpha=0 à l'export PNG.

**Quel effet visuel ont les coins arrondis ?** Ils sont plus doux et accueillants que les angles droits, réduisent l'agressivité visuelle, largement utilisés en design UI pour icônes, boutons, cartes, avatars. Le "Superellipse (squircle)" d'iOS pousse les coins à l'extrême de la courbe douce.

**Pourquoi beaucoup d'icônes d'App requièrent des coins arrondis ?** iOS/iPadOS/macOS Big Sur appliquent automatiquement des masques d'arrondi, mais un fond blanc cause un défaut de "bord blanc". La bonne pratique est de générer d'abord un PNG avec coins arrondis à la source ; cet outil sert à cela.

**Pixels vs pourcentages :** Les pixels sont précis mais difficiles à aligner entre images ; les pourcentages sont adaptatifs et cohérents sur différentes tailles. Les systèmes de design utilisent des pourcentages, comme 22.37% pour iOS et 25% pour Android.

**Différence avec CSS border-radius :** CSS border-radius agit sur la couche visuelle, l'image exportée garde les angles droits ; cet outil génère de vrais PNG avec canal Alpha pour tout scénario sans CSS (PPT, vidéo, impression).

Cas d'utilisation

Créer des avatars pour réseaux sociaux (WhatsApp, LINE, Twitter/X, Instagram, Facebook), générez des avatars ronds en un clic
Ajouter rapidement des coins arrondis aux icônes d'App (iOS recommande 22-25%, Android Adaptive Icon 25%)
Les images de produits e-commerce avec coins arrondis sont plus douces et attrayantes, améliorant clics et conversions
Traitement local de matériaux à coins arrondis pour présentations PPT, montage vidéo et impression
Créer par lots des icônes et matériaux avec même rayon pour systèmes de design (traiter une par une)

Comment utiliser

Cliquez sur la zone de téléchargement pour sélectionner une image, ou glissez-déposez directement JPG/PNG/WEBP dans la zone
Choisissez préréglages petit (10%), moyen (25%), grand (50%) en un clic, ou déplacez le curseur pour personnaliser (cliquez pour changer unité)
Choisissez le format de sortie : PNG (fond transparent)/WEBP (taille réduite)/JPG (fond blanc)
Aperçu en temps réel à droite, cliquez sur télécharger quand satisfait, fichier sauvegardé automatiquement avec suffixe -rounded

Fonctionnalités

Double unité : le rayon prend en charge pixels (0-500px) et pourcentages (0-50%) avec changement libre, adaptable à différents scénarios
3 préréglages : petit (10%), moyen (25%), grand (50%) en un clic, aussi ajustement personnalisé par curseur
Trois formats de sortie : PNG (avec canal alpha), WEBP (taille réduite), JPG (fond blanc sans transparence)
Aperçu en temps réel : ajustez le curseur pour voir l'effet instantanément, fond damier montre les zones transparentes
Glisser-déposer : cliquez pour sélectionner ou glissez directement les images dans la zone, prend en charge JPG/PNG/WEBP
Traitement local : tout s'effectue dans Canvas du navigateur, les images ne sont pas envoyées au serveur

Best Practices

Choisissez PNG par défaut pour la transparence, pas JPG

JPG ne prend pas en charge le canal Alpha, remplissage blanc forcé avec carrés blancs aux coins. N'utilisez JPG que sans transparence, choisissez PNG par défaut.

Choisissez WEBP pour taille réduite avec transparence

WEBP prend aussi en charge la transparence mais 25-35% plus petit que PNG, idéal pour matériaux web. Attention : certains vieux logiciels de design ne reconnaissent pas WEBP, préférez PNG en interopérabilité.

Proportion de coins pour icônes d'App

Le système iOS ajoute automatiquement ~22.37% d'arrondi aux icônes, mais un fond blanc original cause un défaut de "bord blanc". Générez d'abord un PNG avec coins arrondis (22-25% recommandé). Android Adaptive Icon recommande 25% comme zone de sécurité.

Utilisez le rayon 50% pour les avatars ronds

La plupart des plateformes sociales comme WhatsApp, LINE, Twitter, Instagram utilisent des avatars ronds. Le préréglage 50% génère un PNG rond en un clic, fond transparent adapté aux thèmes clair/sombre.

Guide des icônes iOS App

N'appliquez pas CSS border-radius aux images déjà arrondies

Si vous avez exporté un PNG avec coins arrondis, ne l'entourez pas de CSS border-radius + overflow:hidden, cela causerait un double traitement et des bords flous. Affichez directement avec la balise img.

Pour des coins plus complexes (coins différents, seulement supérieurs)

Cet outil ne prend en charge que les quatre coins identiques standard. Pour scénarios complexes comme coins supérieurs de TabBar, coins inférieurs ou coins individuels, utilisez l'[éditeur d'images](/image/image-editor/) ou Figma.

FAQ

Comment ajouter des coins arrondis à une image ?

Téléchargez l'image puis cliquez sur les préréglages petit/moyen/grand pour choisir rapidement, ou déplacez le curseur pour personnaliser en pixels (0-500px) ou pourcentages (0-50%). Aperçu en temps réel à droite, téléchargez quand satisfait, le format PNG préserve automatiquement la transparence.

Pixels ou pourcentages pour le rayon ?

Les pixels conviennent au contrôle précis pour des tailles fixes. Les pourcentages calculent l'arrondi selon la proportion du petit côté, plus flexibles pour différentes tailles. Changez d'unité en cliquant ; 50% produit un cercle parfait, idéal pour avatars.

De quelle couleur seront les coins arrondis ?

En format PNG ou WEBP, les coins sont des pixels complètement transparents (Alpha=0), fusion naturelle sur tout fond. En JPG le fond est automatiquement blanc (avertissement jaune affiché), pour images finales sans transparence.

Quels formats d'image sont pris en charge ?

Entrée JPG, PNG, WEBP ; sortie PNG (transparent), WEBP (taille réduite), JPG (fond blanc). Le nom du fichier ajoute automatiquement le suffixe -rounded pour distinguer l'original.

Y a-t-il une limite à la taille du rayon ?

Mode pourcentage 0-50% (50% = cercle parfait), mode pixel 0-500px. Plus la valeur est grande, plus les coins sont arrondis ; à la moitié du petit côté c'est un cercle. Outil basé sur Canvas arcTo + clip pour coins standard (pas Squircle/superellipse).

Peut-on faire des avatars ou icônes d'App ?

Parfaitement. Pour avatars circulaires choisissez le préréglage 50% ; pour icônes iOS App 22-25% (utilisez 25%), pour Android Adaptive Icon 25% comme zone de sécurité. Le PNG transparent s'adapte à tous les thèmes.

L'arrondi rend-il l'image floue ?

Non. Le recadrage s'effectue sur la résolution d'origine via Canvas sans rééchantillonnage ni compression, qualité identique à l'original. Les coins sont de vrais pixels transparents, pas de transitions floues, bords nets.

Les images sont-elles divulguées pendant le traitement ?

Non. Tout se déroule localement dans le navigateur via Canvas API, les images ne transitent par aucun serveur du chargement au téléchargement. Mêmes images sensibles comme photos d'identité sont sécurisées.

Pourquoi l'effet de coins arrondis ne s'affiche pas ?

Vérifiez : ① le rayon est-il supérieur à 0 (curseur pas à l'extrémité gauche) ; ② l'image est-elle chargée (formats JPG/PNG/WEBP) ; ③ le navigateur prend-il en charge HTML5 Canvas (navigateurs modernes oui). Si problème persiste, actualisez la page.

Quelle différence avec CSS border-radius ?

CSS border-radius agit sur la couche d'affichage, l'image exportée garde les coins droits et ne fonctionne que sur le web ; cet outil génère de vrais fichiers PNG avec canal Alpha pour PPT, vidéos, impression et tout scénario sans CSS.

Glossaire

Rayon de coin (Border Radius): Valeur du rayon de l'arc déterminant la courbure. Valeur plus élevée = coin plus arrondi, maximum (moitié du petit côté) forme un cercle. Prend en charge pixels (0-500px) et pourcentages (0-50%).
Canal Alpha: Canal de transparence intégré à PNG/WEBP, chaque pixel utilise 0-255 pour l'opacité. Les coins ont Alpha=0 après arrondi, donc fond complètement transparent, pas d'une couleur.
Squircle (superellipse): Forme de coin introduite dans iOS 7+, plus douce que le rectangle arrondi traditionnel. Formule mathématique x⁴+y⁴=r⁴. Cet outil produit des arcs standard, utilisez Figma/Sketch pour Squircle.
Adaptive Icon: Icône adaptative introduite dans Android 8.0+, composée de deux couches (premier plan et arrière-plan). Recommandé 25% de rayon comme zone de sécurité, le launcher OEM applique un masque.
Canvas arcTo: Méthode de dessin d'arcs de Canvas 2D API. Cet outil combine arcTo + clip pour créer des chemins de rectangle arrondi, recadrant l'image dans la zone qui devient pixels transparents Alpha=0.

Tableau des standards de coins par plateforme

Plateforme / Élément	Taille de base	Proportion recommandée	Approximatif (px)
Icône iOS / iPadOS App	`1024 × 1024`	Environ 22.37%	≈ 229 px
Android Adaptive Icon	`108 × 108`	Environ 25%	≈ 27 px
Icône macOS Sonoma App	`1024 × 1024`	Squircle superellipse	Pas de px fixe
Cartes Windows 11	`—`	Environ 8 px	8 px
Material Design 3 Large	`—`	Environ 28 px	28 px
Avatar WhatsApp / LINE	`640 × 640`	50% (cercle complet)	320 px
Avatar Twitter / Instagram	`400 × 400`	50% (cercle complet)	200 px
Image produit e-commerce	`800 × 800`	Recommandé 16~24 px	16-24 px