Coins arrondis et images rondes pour les sites web

Les coins arrondis peuvent intégrer les photos à des cartes, tandis que des portraits circulaires donnent une forme cohérente à une page d’équipe. La forme doit servir le contenu : un cercle qui coupe un visage ou un arrondi qui masque un détail produit important n’améliore pas l’image.

Deux méthodes permettent cet effet : modifier le fichier ou laisser le navigateur arrondir son affichage. Le choix dépend de l’endroit où vous utiliserez l’image et de la nécessité de changer la forme plus tard.

Utiliser CSS ou modifier le fichier image ?

CSS est généralement plus souple sur un site que vous contrôlez. Vous pouvez réutiliser l’original dans plusieurs mises en page, ajuster les coins sur tout le site et changer le cadrage sans exporter un autre fichier. De nombreux éditeurs proposent déjà un réglage de rayon qui applique ce style.

Modifiez le fichier si le site ou l’application accepte une image sans proposer de réglage des coins, ou si vous placez l’image arrondie dans une autre création. Les coins transparents sont enregistrés dans le fichier : la forme ne dépend donc pas du CSS du site.

Choisir une forme et un rayon adaptés au contenu

Partez du rôle de l’image. Un cercle peut convenir à un petit portrait dont le visage est le sujet principal. Un paysage, une capture d’écran ou un détail produit nécessite généralement un rectangle pour garder davantage d’informations.

Pour les cartes, essayez un rayon modéré de 12 ou 16 pixels CSS et comparez-le aux cartes, boutons et autres images. Ce sont des exemples de design, pas des exigences. Quelques rayons communs facilitent la cohérence davantage qu’un arrondi différent pour chaque photo.

Jugez à la taille d’affichage réelle. Un arrondi discret dans une grande source peut devenir presque invisible en miniature. Les coins enregistrés dans le fichier changent d’échelle avec l’image. Un rayon CSS fixe, par exemple 16 pixels, garde cette valeur CSS même lorsque la largeur affichée change.

Prenons une image de 800 × 400 avec un arrondi Pixilo de 25%. Son rayon enregistré vaut 50 pixels. À 400 × 200, le rayon visible est divisé par deux, soit environ 25 pixels CSS. À 200 × 100, il atteint environ 12,5 pixels CSS. Choisissez l’arrondi en regardant la taille que verront les visiteurs, pas seulement l’aperçu en pleine taille.

Éloignez le contenu important des coins. Vérifiez les personnes aux bords d’une photo de groupe et les libellés ou commandes d’une capture. Si un détail utile disparaît, réduisez l’arrondi ou changez le cadrage plutôt que de forcer la forme.

Arrondir les coins avec Pixilo

1. Préparez une copie de travail. Conservez l’original à part. Si la forme doit changer, utilisez d’abord l’outil de recadrage. Si les dimensions sont excessives, redimensionnez la copie avant l’arrondi.
2. Choisissez l’image. Ouvrez Arrondir les coins d’une image et sélectionnez un JPG, PNG ou WebP.
3. Réglez Arrondi des coins. Commencez par une valeur faible et augmentez-la en observant l’aperçu. Les quatre coins partagent le même rayon.
4. Choisissez le fond des coins retirés. Laissez Fond transparent activé pour utiliser l’image sur plusieurs couleurs de page. Désactivez-le pour choisir une couleur de fond.
5. Téléchargez et vérifiez. Cliquez sur Télécharger le PNG, ouvrez le fichier enregistré et examinez les bords sur le fond prévu.

L’outil conserve largeur et hauteur en pixels. Il retire ou remplit les coins dans ces dimensions, sans redimensionner l’ensemble ni supprimer l’arrière-plan du sujet.

Que signifie le pourcentage d’arrondi ?

Pixilo calcule le rayon en pourcentage de la moitié du côté le plus court. À 0%, les coins restent droits ; à 100%, le rayon circulaire est le plus grand possible. Dans l’exemple de 800 × 400, la moitié du côté court vaut 200 pixels ; 25% représente donc 50 pixels.

Ce curseur n’équivaut pas à un pourcentage CSS. CSS calcule les rayons horizontaux à partir de la largeur et les rayons verticaux à partir de la hauteur. Sur une zone non carrée, border-radius: 50% crée une ellipse. Le réglage 100% de Pixilo crée une capsule sur un rectangle et un cercle sur un carré.

Créer une image circulaire avec Pixilo

Commencez par une image carrée. Une image large reste large, même avec l’arrondi maximal : choisissez le cadrage avant de créer le cercle.

1. Recadrez en 1:1. Ouvrez l’original dans l’outil de recadrage et choisissez un carré. Gardez de la place autour de la tête ou de l’objet : le cercle masquera les coins.
2. Choisissez les dimensions. Une copie de 320 × 320 est une possibilité pour un portrait affiché à 160 × 160 pixels CSS sur un écran 2×. Utilisez l’outil de redimensionnement au besoin. Comparez les détails à la taille d’affichage sans agrandir une petite source uniquement pour atteindre ces chiffres.
3. Arrondissez le carré. Sélectionnez la copie dans Arrondir les coins d’une image, réglez Arrondi des coins sur 100% et gardez Fond transparent activé.
4. Vérifiez le cercle enregistré. Téléchargez le PNG et assurez-vous que tête, cheveux et détails importants restent à l’intérieur.

Le cercle se trouve dans un PNG carré aux coins transparents. Les dimensions du fichier ne changent pas ; seul le contour visible devient circulaire. Un mur ou une pièce derrière la personne reste visible dans le cercle.

Ajouter des coins arrondis avec CSS

Si l’éditeur propose déjà un réglage de rayon, essayez-le d’abord. Pour une mise en œuvre personnalisée, le CSS doit cibler l’élément image :

1. Ajoutez la classe. Si vous modifiez le HTML, utilisez l’exemple ci-dessous ou ajoutez rounded-image à l’attribut class de l’élément <img> existant. Dans un champ de classe CSS, saisissez le nom sans point initial, puis vérifiez si la classe est appliquée à l’image ou à son conteneur.
2. Ajoutez le CSS. Collez l’exemple CSS dans la feuille de style du site ou le champ de CSS personnalisé. Conservez le point de .rounded-image : il sélectionne les éléments de cette classe. Un champ CSS attend généralement seulement du CSS, sans balises HTML <style>.
3. Vérifiez l’image publiée. Remplacez chemin et informations d’image si vous reprenez le HTML. Prévisualisez la page et assurez-vous que les styles du thème ou de l’éditeur ne prennent pas le dessus.

Cet exemple préserve les proportions et permet à l’image de rétrécir dans son conteneur :

<img
  class="rounded-image"
  src="/images/finished-kitchen.webp"
  width="1200"
  height="800"
  alt="Cuisine terminée avec placards en chêne et plan de travail en pierre">

.rounded-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 16px;
}

Utilisez le chemin, les dimensions et le texte alternatif de votre image. Les attributs HTML de largeur et de hauteur décrivent la source et aident à réserver l’espace. CSS définit taille affichée et forme des coins. Pour l’exemple circulaire suivant, procédez de même avec la classe team-avatar et son CSS.

Si l’éditeur place la classe sur un conteneur autour de l’image, remplacez le sélecteur .rounded-image par .rounded-image img. Pour le cercle, utilisez .team-avatar img au lieu de .team-avatar. Les règles de taille et d’arrondi ciblent alors l’image à l’intérieur.

La valeur 16px arrondit les quatre coins. CSS permet aussi des rayons différents : border-radius: 16px 16px 0 0 arrondit seulement ceux du haut, dans l’ordre haut gauche, haut droit, bas droit, bas gauche. Pixilo arrondit actuellement tous les coins de la même manière. La référence MDN de border-radius détaille syntaxe et pourcentages.

CSS modifie l’apparence sur la page, pas le fichier source téléchargé. Ouvrir ou enregistrer l’original séparément ne conserve pas cette forme. Les parties masquées par CSS restent aussi dans la source.

Créer une image circulaire avec CSS

Un cercle CSS demande une largeur et une hauteur affichées égales. La source peut être rectangulaire : object-fit: cover remplit le carré sans déformer la personne, puis le rayon découpe ce carré en cercle.

<img
  class="team-avatar"
  src="/images/team-portrait.webp"
  width="800"
  height="1200"
  alt="Maya, kinésithérapeute">

.team-avatar {
  display: block;
  width: 160px;
  height: 160px;
  object-fit: cover;
  object-position: 50% 40%;
  border-radius: 50%;
}

La source de cet exemple mesure 800 × 1200 pixels et s’affiche dans un carré de 160 × 160. Adaptez ces valeurs à votre image et à votre mise en page. Si vous changez la taille à un point de rupture mobile, gardez largeur et hauteur égales.

object-fit: cover préserve les proportions et coupe ce qui dépasse. object-position: 50% 40% centre horizontalement et, avec cette source verticale, montre une zone légèrement plus haute que le centrage vertical par défaut. Cela ne zoome pas sur le visage. Ajustez la position pour chaque portrait.

MDN explique object-fit et object-position plus en détail. Évitez de forcer un rectangle dans un carré sans réglage d’adaptation, au risque de déformer le sujet.

Exemple : harmoniser les portraits d’une équipe

Un cabinet dispose de quatre photos : deux portraits tête et épaules, une vue plus large prise en salle de soins et un visage cadré de très près. La page d’équipe les affichera dans des cercles de 160 × 160. Leur donner la même forme extérieure n’est qu’une première étape.

1. Choisissez un cadrage de référence. Décidez avec un portrait de la place à donner à la tête et aux épaules. Laissez de l’air au-dessus des cheveux et placez les yeux à des hauteurs voisines. Utilisez ce repère visuellement, sans imposer une mesure rigide à chacun.
2. Harmonisez la taille des visages. Recadrez davantage la vue de la pièce pour que la personne ne paraisse pas bien plus petite. Si le portrait serré coupe déjà cheveux ou menton, utilisez un original plus large si possible. Agrandir son cercle ne récupère pas le contenu manquant.
3. Choisissez la méthode. En CSS, préparez les cadrages, utilisez le même cadre de 160 × 160 puis ajustez les positions. Pour des fichiers circulaires, préparez des copies carrées identiques, par exemple 320 × 320 si cela convient, et appliquez 100% dans Pixilo à chacune.
4. Examinez l’ensemble. Placez les portraits près des noms à leur taille réelle. Aucun visage ne doit dominer uniquement à cause d’un cadrage plus serré. Vérifiez ensuite le mobile, où les portraits peuvent être empilés.

La cohérence vient aussi d’un cadrage et d’une taille des visages similaires. Conservez le contexte utile, mais placez noms et fonctions dans le texte de la page plutôt que dans les portraits.

Choisir le fond et le format de fichier

Enregistrez avec transparence si l’image doit fonctionner sur plusieurs couleurs de page ou en mode sombre. Un coin blanc peut se fondre dans une page claire et apparaître comme une tache carrée sur une carte sombre. Certains logiciels montrent la transparence sur blanc ou sur un damier. Testez un autre fond avant de conclure que le fichier contient du blanc.

Si Fond transparent est désactivé, la couleur choisie remplit les coins retirés et les zones déjà transparentes. Elle ne remplace pas un fond opaque dans la photo. Si vous avez rempli les coins de blanc et souhaitez la transparence, repartez de l’original et enregistrez une nouvelle copie avec cette option.

PNG conserve la transparence sans ajouter de compression avec pertes, mais peut alourdir une photo. Pour le Web, comparez une copie WebP, qui peut préserver la transparence. La conversion Pixilo est avec pertes : vérifiez bords et détails. JPG ne conserve pas les coins transparents. Notre guide des fonds transparents explique ces choix.

Avec CSS, la photo elle-même n’a pas besoin de transparence. Conservez un JPG ou WebP adapté et laissez le navigateur arrondir son apparence. CSS ne compresse pas la source. Choisissez des dimensions adaptées puis comparez poids et netteté du fichier servi.

Vérifier le résultat dans la mise en page réelle

• Examinez le sujet. Vérifiez visages, cheveux, contours des produits et texte près du cadrage. La forme doit conserver l’information utile.
• Vérifiez les petits écrans. Pour un cercle CSS, gardez largeur et hauteur affichées égales. Évaluez aussi le rayon à la taille finale.
• Essayez les fonds de page. Cherchez des coins opaques indésirables ou un liseré clair sur surfaces claires et sombres.
• Vérifiez la version finale. Le site ou l’application peut redimensionner, recadrer ou convertir le fichier. Contrôlez la copie enregistrée ou publiée, y compris après conversion.
• Gardez un texte alternatif utile. Décrivez le rôle, pas seulement la forme. Un portrait doit identifier la personne dans son contexte ; une image décorative demande généralement un texte alternatif vide. Consultez notre guide des textes alternatifs et noms de fichiers.

Questions fréquentes

Pourquoi l’image est-elle devenue ovale ou en capsule ?

Vérifiez les proportions. Utilisez une largeur et une hauteur affichées égales en CSS, ou recadrez la source en carré avant le réglage 100% de Pixilo. La comparaison des formes ci-dessus montre pourquoi un rectangle donne un autre contour.

Pourquoi les coins restent-ils blancs ?

Essayez d’abord un autre fond comme expliqué plus haut. Si les coins contiennent du blanc, vérifiez la sélection d’une couleur unie ou une conversion en JPG. Le site ou l’application peut aussi avoir remplacé la transparence par du blanc. Enregistrez une nouvelle copie transparente depuis l’original et vérifiez le format après publication.

Pourquoi l’image garde-t-elle des coins droits dans une carte arrondie ?

Arrondir la carte parente ne découpe pas automatiquement son image. Appliquez le rayon à l’image ou utilisez un conteneur arrondi avec overflow: hidden pour découper ensemble son contenu. S’il contient des commandes interactives, vérifiez que leurs indicateurs de focus au clavier restent visibles.

Peut-on créer un cercle sans couper la photo ?

Un cercle ne peut pas remplir tout le cadre d’une photo rectangulaire sans perdre une zone ou changer la composition. Pour garder tout le contenu, placez la photo dans une création carrée plus grande avec de l’espace autour, puis vérifiez la limite du cercle. Un rectangle convient souvent mieux aux contenus détaillés.

Les images arrondies chargent-elles plus vite ?

La forme seule ne garantit pas un téléchargement plus léger. Vérifiez dimensions et formats comme indiqué plus haut, puis mesurez le fichier réellement servi par la page publiée.

Résumer avecChatGPT (s’ouvre dans un nouvel onglet)Grok (s’ouvre dans un nouvel onglet)Google (s’ouvre dans un nouvel onglet)Perplexity (s’ouvre dans un nouvel onglet)Claude (s’ouvre dans un nouvel onglet)