Por que o PNG do meu logo está borrado e como corrigir?

Descubra onde a perda de nitidez aparece primeiro

Exportar um PNG maior ajuda quando a arte original contém detalhes suficientes. Ampliar um arquivo raster pequeno não recupera as curvas e formas exatas das letras do logo vetorial original.

Abra o próprio PNG antes de alterar o site ou exportar novamente. Inspecione-o no tamanho de uso pretendido e em uma visualização em nível de pixel. Depois compare-o com a origem aprovada e a versão enviada.

Use as verificações a seguir para identificar a etapa que precisa de atenção. Elas não presumem que toda borda suave tenha a mesma causa.

• Pouca nitidez na arte original: encontre uma origem melhor ou revise a versão do design para tamanho pequeno.
• Origem nítida, PNG baixado borrado: confira as dimensões de exportação, os limites e as configurações de rasterização.
• Download nítido, mas borrado no site ou e-mail: confira qual imagem está sendo servida e como é dimensionada.
• Marca nítida, letras minúsculas ilegíveis: revise o tamanho mínimo do logo ou use uma versão simplificada aprovada.

Confira o que a origem realmente contém

Uma arte mestre verdadeiramente vetorial oferece formas que podem ser renderizadas em outro tamanho. Um SVG também pode conter imagens bitmap incorporadas, então o nome de arquivo SVG, por si só, não estabelece que o logo seja uma arte vetorial.

Se sua origem é um PNG pequeno copiado de um site antigo, peça o arquivo de trabalho original ou uma exportação vetorial verificada. Exportar esse PNG pequeno novamente em um tamanho maior adiciona pixels estimados. A Adobe descreve a ampliação por reamostragem como um processo que pode introduzir artefatos e não pode acrescentar detalhes ausentes no original.

Se a arte mestre não estiver disponível, reconstruir ou vetorizar a marca é uma tarefa de design separada. Compare as formas e letras reconstruídas com uma referência aprovada antes de usá-las como nova arte mestre.

Leitura complementar: MDN: formatos de imagem · Adobe: tamanho de imagem e reamostragem

Compare os pixels do arquivo com os pixels de exibição

Use o tamanho de exibição real, não a largura que esperava que o layout usasse. As ferramentas de desenvolvedor do navegador podem ajudar a conferir a caixa da imagem renderizada. Considere os pontos de quebra responsivos e qualquer transformação que amplie o logo.

Redimensionar o PNG existente de 200 × 50 para 400 × 100 não cria uma exportação equivalente a partir de arte vetorial. Os dois arquivos podem ter as mesmas dimensões e detalhes de borda diferentes. A proporção de pixels do dispositivo é a relação entre pixels físicos da tela e pixels CSS.

Para o cálculo completo e exemplos de entrega, veja tamanhos de PNG de logo para sites e e-mail.

Veja um exemplo ilustrativo com o logo fictício Morrow Quay, não um teste real de cliente:

• O cabeçalho exibe o logo em 200 × 50 pixels CSS.
• O PNG enviado contém apenas 200 × 50 pixels.
• Uma meta 2× exige 400 × 100 pixels.
• Exporte novamente a arte vetorial em 400 × 100, mantendo a exibição em 200 × 50.

Continue com: Tamanhos de PNG de logo para sites e e-mail

Leitura complementar: MDN: devicePixelRatio

Confira a imagem que o destino realmente serve

Um original grande não ajuda se a página carrega uma miniatura menor gerada. Confira o recurso selecionado e suas dimensões em pixels. Para imagens responsivas, a propriedade currentSrc do navegador identifica a URL da imagem escolhida. Compare esse recurso com o envio original.

Se o arquivo servido for menor, inspecione as configurações de imagem do CMS ou peça ao desenvolvedor que use o arquivo apropriado. Se as dimensões estiverem corretas, compare os arquivos visualmente antes de culpar a otimização. Um serviço pode redimensionar, converter ou processar um envio de outras formas, mas determine qual alteração realmente ocorreu.

PNG usa compressão sem perdas. Reduzir seu tamanho de armazenamento com um processo realmente sem perdas não borra os pixels por si só. Converter um JPEG já danificado em PNG também preserva os danos existentes. Confira todo o caminho de processamento, incluindo redimensionamento ou conversão com perdas, em vez de tratar “compressão” como uma operação única.

Leitura complementar: MDN: currentSrc · MDN: formatos de imagem e compressão

Inspecione as margens e as configurações de borda

Margens transparentes usam parte das dimensões da imagem. Uma área de 400 pixels de largura com uma marca de 200 pixels tem apenas 200 pixels horizontais descrevendo o logo visível. Se exibir a imagem inteira em tamanho maior para aumentar a marca, também ampliará esses pixels. Corrija limites acidentais na origem preservando a área de proteção aprovada.

Alguma suavização nas curvas é o antisserrilhamento normal. Avalie o arquivo no tamanho real de uso e também ampliado. Letras muito pequenas ou traços finos podem precisar de uma alternativa aprovada para tamanho pequeno, mesmo quando as dimensões de exportação forem tecnicamente suficientes.

O Figma oferece opções de reamostragem de imagem PNG: Detailed é o padrão, e Basic usa amostragem pelo vizinho mais próximo. Compare as configurações na sua arte real; uma borda aparentemente mais dura não é automaticamente um resultado mais fiel. O Figma também aceita largura fixa de exportação, como 400w.

O Illustrator oferece Export for Screens nativo para saídas raster nas escalas escolhidas. Suas opções de exportação PNG incluem controles de antisserrilhamento. Confira uma nova exportação da arte original em vez de redimensionar repetidamente o PNG anterior.

Leitura complementar: Figma: configurações de exportação · Adobe: Export for Screens · Adobe: opções de exportação PNG

Exporte novamente e verifique a correção

Crie uma versão substituta nas dimensões necessárias antes de gerar todo o pacote novamente. Coloque-a na mesma aplicação e compare com a versão anterior. Confira novamente o arquivo servido para que uma miniatura antiga ou um arquivo em cache não confunda o resultado.

Para uma origem SVG aprovada, os tamanhos PNG personalizados do logopack.app Pro podem ajudar a criar arquivos específicos para cada destino como parte de um pacote de logos. Este é um fluxo de exportação, não um serviço de vetorização ou recuperação de logos de baixa resolução.

Se o destino aceita SVG, uma versão vetorial verificada pode ser mais adequada. Nosso guia de formatos de arquivo explica essa escolha, e nosso guia de exportação do Figma aborda a preparação da origem.

Considere o problema resolvido quando o arquivo correto estiver nítido o suficiente no tamanho pretendido, o fundo funcionar e o sistema de destino preservar as proporções pretendidas. Guarde a arte mestre verificada e as configurações de exportação para a próxima entrega.

Continue com: Guia de formatos de arquivo · Guia de exportação do Figma

Leitura complementar: Prepare exportações com logopack.app