Cortar imagem em círculo on-line e grátis — Criador de foto de perfil redonda

Círculo ou quadrado arredondado: qual forma usar

A forma não é bem escolha sua — a plataforma aplica a própria máscara ao exibir seu avatar, e não dá para sobrepor isso. O que você escolhe é se o seu arquivo combina com essa máscara.

Isso importa porque um círculo corta cerca de 21% de um quadrado, tudo nos cantos. Se você mesmo cortar em círculo, vê exatamente o que sobra. Se enviar um quadrado inteiro e torcer, o círculo da plataforma vai cortar o que estivesse nesses cantos: o topo de um chapéu, um ombro, metade de um logotipo.

A regra prática: rostos pedem círculo, logotipos com texto pedem quadrado arredondado. Um rosto já é mais ou menos redondo, então os cantos nunca carregaram informação. Um logotipo com texto costuma ser mais largo que alto, e o círculo amputa as pontas da palavra. É por isso que Slack, iOS e a Play Store usam quadrados arredondados para ícones enquanto toda rede social usa círculos para pessoas.

Por que um PNG transparente vale os bytes a mais

Um círculo cortado em JPG não é realmente um círculo. O JPG não tem canal alfa, então os quatro cantos precisam guardar alguma coisa — normalmente branco. Numa página branca ninguém percebe. Coloque esse avatar sobre um tema escuro, um cartão colorido, um slide ou uma sobreposição de vídeo e quatro triângulos brancos aparecem em volta da cabeça.

PNG e WebP têm canal alfa, então os cantos guardam “nada” e o círculo se compõe limpo sobre qualquer fundo. É por isso que o PNG é o padrão aqui. O WebP faz o mesmo trabalho com cerca de um terço dos bytes e todo navegador atual o lê — mas alguns formulários de envio e programas de desktop mais antigos ainda recusam a extensão, então o PNG segue sendo a escolha segura quando você entrega o arquivo ao sistema de outra pessoa.

O único caso a favor do JPG é um teto de tamanho. Se um formulário exigir JPG ou limitar você a algumas dezenas de kilobytes, escolha JPG aqui e defina a cor de fundo como a que a página de destino realmente usa, para que os cantos sumam nela.

Enquadrar um rosto que ainda se lê a 32 pixels

Seu avatar quase nunca é visto no tamanho em que você o exportou. Numa thread de comentários ele tem de 32 a 40 pixels de largura. Nesse tamanho só sobrevivem o contorno da cabeça, o contraste entre rosto e fundo e, mais ou menos, onde estão os olhos. Todo o resto vira borrão.

Então corte mais fechado do que parece natural. Preencha cerca de 60–70% da altura do círculo com a cabeça, ponha os olhos um pouco acima da linha central e deixe uma folga fina acima do cabelo para o corte não parecer acidental. Um fundo carregado é o erro mais comum: ele disputa os poucos pixels disponíveis e transforma a miniatura em ruído. Se o seu fundo é bagunçado, um fundo liso ou desfocado atrás de um corte circular se lê melhor em qualquer tamanho.

Um teste prático: exporte o avatar e olhe para ele no seu gerenciador de arquivos na menor miniatura possível. Se você não conseguir dizer que é você, ninguém mais vai.

O squircle do iOS, explicado

Os ícones de app da Apple não são retângulos arredondados. Um retângulo arredondado junta as bordas retas a um canto de quarto de círculo, e a curvatura salta bruscamente nessa junção — seu olho lê isso como uma leve dobra. A Apple usa no lugar uma superelipse , em que a curvatura cresce aos poucos a partir da borda, de modo que o contorno não tem nenhuma transição visível. Os designers chamam o resultado de squircle.

O canvas só sabe desenhar cantos de arco circular, então o modo de quadrado arredondado aqui é a aproximação por retângulo arredondado, não uma superelipse de verdade. No tamanho de um avatar a diferença é de um ou dois pixels por canto e ninguém vai notar. Ponha o raio dos cantos em cerca de 22% do lado e você chega à mesma proporção que a Apple usa nos ícones de app; a ferramenta usa 24% por padrão, que é como o Slack e a maioria dos apps de chat mascaram seus avatares.

O controle vai até 50%, o que é um círculo — um quadrado arredondado cujo raio de canto chega à metade do lado não tem mais nenhuma borda reta. Essa continuidade é o motivo de as duas formas compartilharem um só caminho de código aqui em vez de serem duas ferramentas separadas.

Bordas, e por que elas são cortadas

Um anel em volta do avatar é um bom jeito de separá-lo de um fundo carregado, e é o único detalhe de estilo que sobrevive à máscara da plataforma — desde que o anel esteja dentro da sua imagem e não em volta dela.

Vale ser preciso aqui. Se uma ferramenta acrescenta uma borda de 6 px fora de um círculo de 320 px, o arquivo vira 332 px, e então a plataforma o redimensiona e aplica de novo a própria máscara circular — que corta no meio do seu anel e o deixa irregular. Esta ferramenta desenha a borda dentro do tamanho que você pediu, então 320 px continuam 320 px e o anel fica exatamente na borda que a máscara espera. O controle de borda é limitado a 12% do lado pelo mesmo motivo: passando disso, deixa de ser um anel e vira uma moldura.

Por que cortar no navegador é mais privado

A maioria dos sites de “cortar em círculo on-line” envia sua foto, corta num servidor e devolve. Para uma foto do seu próprio rosto isso faz diferença: passa a existir uma cópia no disco de outra pessoa, sujeita à política de retenção que estiver valendo neste mês e, muitas vezes, a uma cláusula dos termos de uso que lhes concede uma licença sobre ela.

A Resizo não tem servidor que receba imagens. O corte roda na sua aba pela própria API canvas do navegador. Dois jeitos de conferir: abra o painel de Rede do navegador e veja que nada é enviado enquanto você corta, ou desconecte da internet depois que a página carregar e corte assim mesmo — continua funcionando.

Um efeito colateral útil: recodificar descarta os metadados EXIF, então as coordenadas de GPS e o horário que o seu celular gravou no original não viajam junto com o avatar que você publica. Se precisar desses metadados, guarde o arquivo original.