La Moitié de l’Anneau de Votre Photo de Profil Est Jetée

Toute plateforme qui affiche une photo de profil l’affiche en cercle. Vous envoyez un carré et l’application lui applique un masque. Ce masque est l’endroit où meurt l’anneau que vous avez dessiné, car un trait posé sur le bord du carré est centré précisément sur la ligne que le masque découpe.

La moitié tombe hors du cercle. Pas à peu près la moitié — exactement la moitié, à toutes les tailles que nous avons mesurées.

Ce que le recadrage fait à un anneau

Cela se mesure plutôt que cela ne se discute. Tracez un anneau dans une couleur que rien d’autre n’utilise, appliquez le masque circulaire que la plateforme appliquera, et comptez combien de ces pixels sont encore là sur la ligne horizontale du centre :

La raison est la seule chose sur les traits de canvas que tout le monde connaît et que personne n’applique ici : un trait est centré sur son chemin. Donnez-lui un chemin au rayon R — le bord de l’image — et il s’étend de L/2 vers l’intérieur et de L/2 vers l’extérieur. La moitié extérieure est hors du cercle, donc le masque l’emporte.

Ce qui rend cela digne d’un article, ce n’est pas l’arithmétique. C’est que le résultat n’a pas l’air cassé. Un anneau à la moitié de sa largeur prévue ressemble à un anneau plus fin, qui ressemble à un choix de design. Rien ne plante, rien n’avertit, rien ne manque. Vous publiez simplement, sans le savoir, autre chose que ce que vous avez fait — et si vous corrigez à l’œil, vous finissez par dessiner un anneau de 40 pixels pour en obtenir un de 20, sans jamais apprendre pourquoi.

Le correctif tient dans une soustraction

Rentrez le chemin de la moitié de la largeur du trait. Tracez à R − L/2 au lieu de R et toute la largeur tombe à l’intérieur du cercle :

var R = size / 2;
var W = Math.round(size * ringPercent / 100);

ctx.lineWidth = W;
ctx.beginPath();
ctx.arc(R, R, R - W / 2, 0, Math.PI * 2);   // et non R
ctx.stroke();

Mesuré de la même façon qu’avant : 20 px demandés, 20 px survivants. 40 pour 40. 60 pour 60. Une ligne, et l’anneau est celui que vous avez dessiné.

Les coins ne vous ont jamais appartenu

L’anneau est la moitié visible du problème. La moitié invisible, c’est ce que le cercle coûte avant même que vous n’ajoutiez quoi que ce soit.

Un cercle inscrit dans un carré en couvre π/4 de l’aire. Compter les pixels survivants après un masque circulaire donne 21,46 % de l’image perdue — identique à 400 px et à 1000 px, parce que c’est un rapport et non un nombre de pixels, et 1 − π/4 vaut exactement 21,46 %.

Autrement dit, plus d’un cinquième de chaque avatar jamais envoyé n’a jamais été vu par personne. Tout ce qui compte — un visage, un logo, un mot — doit tenir dans le cercle inscrit, sinon ce n’est pas dans l’image. Un logo recadré au plus près de sa boîte perd ses coins à chaque fois.

Ce qu’un anneau coûte en photo

L’anneau grignote ensuite vers l’intérieur ce que le cercle a laissé. Un anneau de largeur L sur un avatar de taille T laisse une photo de T − 2L de diamètre, et l’aire suit le carré :

Un anneau de 40 pixels sur un avatar de 400 masque plus d’un tiers de la photographie. C’est un vrai arbitrage, et il vaut mieux le faire délibérément : un anneau franc reste un anneau franc, mais c’est aussi un recadrage plus serré sur votre visage que ce que vous vouliez probablement.

Pourquoi la largeur devrait être un pourcentage

Choisissez un anneau en pixels et il ne fonctionne qu’à une seule taille d’export. Vingt pixels sont francs à 400 px et presque invisibles à 1500 px — le même nombre, le quart de la largeur relative. Les pourcentages survivent au changement ; les nombres de pixels non, et c’est pourquoi un avatar qui semblait juste au moment de sa création paraît faux le jour où une plateforme se met à servir une version plus grande.

Cinq pour cent est une bonne valeur par défaut. Cela se lit clairement à toutes les tailles et coûte 19 % de la photo, ce qui est le maximum qu’un anneau devrait prendre à un visage.

Que faire au moment de publier

• Gardez le sujet à l’intérieur du cercle inscrit. Les coins sont déjà partis avant que vous ne commenciez, et 21,46 %, c’est beaucoup à perdre par inadvertance.
• Exportez en 800 × 800. C’est confortablement au-dessus de ce qu’affiche n’importe quelle grande plateforme, donc l’image survit à leur réduction avec du détail en réserve.
• Laissez les coins transparents. Ils sont masqués, donc la transparence est le fichier honnête — sauf si vous publiez là où le carré s’affiche sans recadrage, où la transparence prend la couleur de fond de la page et passe pour une erreur.
• Vérifiez un aperçu rond, pas un carré. Un aperçu carré vous montre une image que personne ne verra jamais.

Essayez

Notre générateur d’anneau pour photo de profil fait la soustraction ci-dessus, et vous montre un troisième aperçu dessiné à la manière habituelle pour que vous voyiez la différence plutôt que de nous croire sur parole. Il indique la largeur d’anneau qui survit, la photo qui reste à l’intérieur, et les 21,46 % que le cercle a pris. Tout se passe dans votre navigateur — la photo n’est jamais envoyée.

Si la photo n’est pas encore carrée, le redimensionneur d’images s’en charge d’abord, et le vérificateur de zone sûre montre ce qu’une appli recouvre quand vous publiez autre chose.

Questions fréquentes