Toda plataforma que mostra uma foto de perfil mostra como círculo. Você envia um quadrado; o app aplica a máscara. Essa máscara é o problema inteiro, porque um anel desenhado na borda do quadrado é traçado centrado na linha por onde a máscara corta — então a metade externa do traço cai fora do círculo e é descartada.
Medimos traçando um anel, aplicando a máscara circular e contando os pixels sobreviventes na linha do centro:
| Avatar | Anel pedido | Anel que sobrevive |
|---|---|---|
| 400 px | 20 px | 10 px |
| 400 px | 40 px | 20 px |
| 1000 px | 60 px | 30 px |
Exatamente metade, sempre, em qualquer tamanho. E não parece quebrado — parece um anel mais fino do que o que você escolheu, e é por isso que ninguém investiga. Você simplesmente recebe, em silêncio, um design diferente do que fez.
Trace o anel no raio R − L/2 em vez de R, e a largura inteira cai dentro do círculo. Medido do mesmo jeito: 20 px pedidos, 20 px sobrevivendo; 40 para 40; 60 para 60. Esta ferramenta faz isso, e mostra o terceiro painel acima — as mesmas opções desenhadas do jeito de sempre, depois do corte — para você ver a diferença em vez de acreditar na nossa palavra.
Um círculo inscrito num quadrado cobre π/4 dele. Contando os pixels sobreviventes depois da máscara dá 21,46 % da imagem perdidos, idêntico a 400 px e a 1000 px, que é exatamente 1 − π/4. Os cantos nunca são seus. Qualquer coisa que importe — um rosto, uma logo, um texto — precisa caber dentro do círculo inscrito, ou não está na foto.
O anel então come para dentro do que sobrou:
| Avatar | Anel | Foto restante | Foto escondida |
|---|---|---|---|
| 400 px | 8 px | 384 px | 7,8 % |
| 400 px | 20 px | 360 px | 19 % |
| 400 px | 40 px | 320 px | 36 % |
| 1000 px | 60 px | 880 px | 22,6 % |
É por isso que aqui a largura do anel é uma porcentagem do avatar e não uma contagem de pixels. Um anel de 5 % fica igual numa exportação de 400 px e numa de 1500 px; 20 px não.
Como esses pixels foram contados, e o código que os contou, está escrito em Metade do anel da sua foto de perfil é jogada fora, e nada te avisa.
Como os cantos são mascarados de qualquer forma, a exportação honesta deixa eles transparentes — o que você vê é o que toda plataforma vai mostrar. Mas alguns lugares não cortam em círculo: certos fóruns, certos apps de mensagem e a versão grande da foto na página do perfil. Ali, cantos transparentes aparecem com a cor de fundo daquela página, o que pode parecer um erro. Se você vai postar em algum lugar que talvez mostre o quadrado, preencha os cantos com a cor do anel, branco ou preto.
Não. O arquivo é lido pelo seu navegador, desenhado num canvas na página e devolvido como download. Ele nunca chega a um servidor, e é por isso que continua funcionando com a aba offline depois que a página carregou.
Porque ele fica mesmo. Um anel traçado na borda do quadrado é cortado ao meio pelo corte circular — medido em exatamente metade, em todos os tamanhos que testamos. Recue o traço em metade da largura dele e o anel inteiro sobrevive. Essa é a única diferença.
800 × 800 fica confortavelmente acima do que qualquer plataforma grande exibe, então sobrevive à redução delas com detalhe de sobra. Ir para 1500 custa tamanho de arquivo e não compra nada, a não ser que a plataforma mostre uma versão grande na página do perfil.
Para o design sobreviver a uma troca de tamanho de exportação. Um anel de 20 pixels é forte a 400 px e quase invisível a 1500 px; 5 % é 5 % nos dois. A ferramenta mostra a largura em pixels que isso dá.
Normalmente sim — eles são mascarados, então a transparência é o arquivo honesto. Preencha só se você postar em algum lugar que mostre o quadrado sem cortar, onde a transparência assumiria a cor de fundo daquela página.
Funciona, e ali importa mais: uma logo com margem apertada perde os cantos para o círculo. Deixe respiro em volta da marca, mantenha o anel fino e confira a prévia redonda em vez da quadrada.
Sim. O desenho é feito pelo mesmo canvas que o desktop usa. Fotos muito grandes são limitadas pela memória do navegador, não pela ferramenta; se o download vier em branco, redimensione a foto antes.
Aqui não — a exportação é um PNG parado. A maioria das plataformas achata um avatar animado no primeiro quadro de qualquer jeito, então a resposta prática é exportar esse quadro e colocar o anel nele.