Metade do Anel da Sua Foto de Perfil É Jogada Fora

Toda plataforma que mostra uma foto de perfil mostra como círculo. Você envia um quadrado e o app aplica a máscara. Essa máscara é onde o anel que você desenhou morre, porque um traço apoiado na borda do quadrado fica centrado exatamente na linha por onde a máscara corta.

Metade dele cai fora do círculo. Não mais ou menos metade — exatamente metade, em todos os tamanhos que medimos.

O que o corte faz com um anel

Isso dá para medir em vez de discutir. Trace um anel numa cor que mais nada usa, aplique a máscara circular que a plataforma vai aplicar, e conte quantos desses pixels continuam ali na linha horizontal do centro:

O motivo é a única coisa sobre traços em canvas que todo mundo sabe e ninguém aplica aqui: um traço é centrado no caminho dele. Dê a ele um caminho no raio R — a borda da imagem — e ele se estende L/2 para dentro e L/2 para fora. A metade de fora está fora do círculo, então a máscara leva.

O que torna isso digno de um texto não é a aritmética. É que o resultado não parece quebrado. Um anel com metade da largura pretendida parece um anel mais fino, que parece uma decisão de design. Nada dá erro, nada avisa, nada some. Você simplesmente publica em silêncio outra coisa diferente do que fez — e se tentar corrigir no olho, acaba desenhando um anel de 40 pixels para obter um de 20, sem nunca descobrir o porquê.

A correção é uma subtração

Traga o caminho para dentro em metade da largura do traço. Trace em R − L/2 em vez de R e a largura inteira cai dentro do círculo:

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);   // não R
ctx.stroke();

Medido do mesmo jeito de antes: 20 px pedidos, 20 px sobrevivendo. 40 para 40. 60 para 60. Uma linha, e o anel é o anel que você desenhou.

Os cantos nunca foram seus

O anel é a metade visível do problema. A metade invisível é o que o círculo custa antes de você adicionar qualquer coisa.

Um círculo inscrito num quadrado cobre π/4 da área dele. Contar os pixels sobreviventes depois de uma máscara circular dá 21,46 % da imagem perdidos — idêntico a 400 px e a 1000 px, porque é uma razão e não uma contagem de pixels, e 1 − π/4 é 21,46 % exatamente.

Ou seja, mais de um quinto de todo avatar já enviado nunca foi visto por ninguém. Qualquer coisa que importe — um rosto, uma logo, uma palavra — precisa caber dentro do círculo inscrito, ou não está na foto. Uma logo cortada rente à caixa dela perde os cantos sempre.

Quanto da foto um anel custa

Aí o anel come para dentro do que o círculo deixou. Um anel de largura L num avatar de tamanho T deixa uma foto de T − 2L de diâmetro, e a área vai ao quadrado:

Um anel de 40 pixels num avatar de 400 esconde mais de um terço da fotografia. Essa é uma troca de verdade, e vale fazer de propósito: um anel marcante é um anel marcante, mas também é um corte mais fechado no seu rosto do que você provavelmente queria.

Por que a largura deveria ser uma porcentagem

Escolha um anel em pixels e ele só funciona num tamanho de exportação. Vinte pixels são enfáticos a 400 px e quase invisíveis a 1500 px — o mesmo número, um quarto da largura relativa. Porcentagens sobrevivem à mudança; contagens de pixels não, e é por isso que um avatar que parecia certo quando foi feito parece errado no dia em que a plataforma começa a servir uma versão maior.

Cinco por cento é um bom padrão. Lê-se com clareza em qualquer tamanho e custa 19 % da foto, que é o máximo que um anel deveria tirar de um rosto.

O que fazer na hora de postar

• Mantenha o assunto dentro do círculo inscrito. Os cantos já foram antes de você começar, e 21,46 % é muito para perder sem querer.
• Exporte em 800 × 800. Fica confortavelmente acima do que qualquer plataforma grande exibe, então sobrevive à redução delas com detalhe de sobra.
• Deixe os cantos transparentes. Eles são mascarados, então a transparência é o arquivo honesto — a não ser que você poste onde o quadrado aparece sem corte, onde a transparência assume a cor de fundo da página e parece um erro.
• Confira uma prévia redonda, não uma quadrada. Uma prévia quadrada te mostra uma imagem que ninguém nunca vai ver.

Experimente

Nosso gerador de anel para foto de perfil faz a subtração acima, e mostra uma terceira prévia desenhada do jeito de sempre para você ver a diferença em vez de acreditar na nossa palavra. Ele informa a largura do anel que sobrevive, a foto que fica dentro dele e os 21,46 % que o círculo levou. Tudo acontece no seu navegador — a foto nunca é enviada.

Se a foto ainda não é quadrada, o redimensionador de imagem resolve isso primeiro, e o verificador de área segura mostra o que um app cobre quando você posta outra coisa.

Perguntas frequentes