Peso, tamanho e formato do logo na assinatura de e-mail

O logo é o único elemento gráfico obrigatório de uma assinatura corporativa, e aquele cujas características técnicas são mais frequentemente deixadas ao acaso. Três parâmetros decidem o resultado: as dimensões, a densidade e o formato de arquivo.

As dimensões de exibição

A restrição de partida é a largura total da assinatura, que deve ficar entre 500 e 600 px para funcionar no celular. O logo, portanto, não pode passar de um terço dessa largura sem esmagar o resto.

Na prática:

Um logo maior não fortalece a marca: ele desequilibra o bloco e empurra os dados de contato para fora do primeiro olhar.

A densidade: exportar em dobro

É o ponto técnico mais esquecido. Praticamente todas as telas recentes — notebooks, tablets, celulares — exibem dois ou mais pixels físicos para cada pixel lógico. Uma imagem exportada no tamanho de exibição parece borrada nelas.

A regra, portanto, é: exporte em dobro, exiba pela metade.

Para um logo exibido em 180 × 48 px, gere um arquivo de 360 × 96 px e depois limite as dimensões no HTML:

<img src="logo@2x.png" width="180" height="48" alt="Empresa"
     style="display:block;border:0;width:180px;height:48px" />

Os atributos HTML são indispensáveis: o Outlook costuma ignorar as dimensões declaradas apenas em CSS e exibiria a imagem nos seus 360 px nativos. O mecanismo está detalhado em assinatura de e-mail em HTML, e as outras causas de logo quebrado em inserir um logo na assinatura do Outlook.

O formato de arquivo

PNG-24 para um logo com cores chapadas, com transparência. É a escolha padrão: contornos nítidos, transparência limpa e suporte universal.

PNG-8 se o seu logo tiver poucas cores. O arquivo fica bem mais leve, mas os degradês e as bordas suavizadas perdem qualidade.

JPEG apenas para uma fotografia — um retrato, por exemplo. Nunca para um logo com cores chapadas: a compressão gera artefatos visíveis em torno dos contornos nítidos.

Nada de SVG. O vetor seria ideal na teoria — nítido em todas as densidades, muito leve —, mas a maioria dos clientes de e-mail não o exibe, e alguns o bloqueiam por motivos de segurança. Converta o seu arquivo vetorial para PNG.

GIF apenas para um banner animado, nunca para um logo. A paleta limitada a 256 cores prejudica os degradês.

O limite de peso

Fique abaixo de 30 KB para o logo e abaixo de 100 KB para o conjunto das imagens da assinatura, banner incluído.

Não é uma questão de banda: ninguém se preocupa com 200 KB hoje em dia. É uma questão de percepção. As imagens de uma assinatura carregam depois do corpo da mensagem; se demorarem, o destinatário vê primeiro um bloco desmontado, com quadros vazios que vão se preenchendo aos poucos. A impressão é de uma mensagem quebrada.

Uma passada de compressão sem perdas geralmente basta para reduzir pela metade o peso de um PNG, sem diferença visível.

Bom saber: verifique o peso do arquivo realmente servido, não o da sua exportação. Acontece de um logo de 8 KB ser substituído por uma versão de 1.200 px e 400 KB em uma atualização da identidade visual, sem que ninguém perceba.

O caso do modo escuro

Cada vez mais clientes de e-mail oferecem um tema escuro, que inverte o fundo da mensagem. Um logo preto sobre fundo transparente fica invisível nele.

Três abordagens, em ordem de confiabilidade:

O logo sobre um selo branco. O arquivo inclui um fundo branco levemente arredondado. É feio na teoria, robusto na prática, e funciona em todo lugar.

Um logo bicolor que funcione nos dois fundos. Se a sua identidade visual permitir — um logo com uma cor de destaque com contraste suficiente tanto no claro quanto no escuro —, é a melhor solução.

A troca por media query. prefers-color-scheme funciona só em alguns clientes, e não no Outlook para Windows. Trate-a como uma melhoria progressiva, nunca como a solução principal.

O verdadeiro desafio: que o arquivo certo seja usado em todo lugar

Todas essas regras são fáceis de seguir uma vez. O problema surge quando quarenta pessoas colam, cada uma, a sua versão do logo: uma pega o arquivo do folder impresso, outra uma captura de tela do site, uma terceira a identidade visual antiga.

Um modelo centralizado resolve isso: o logo é enviado uma vez, hospedado em uma URL estável, dimensionado corretamente e bloqueado. Quando a identidade visual muda, você substitui o arquivo e todas as assinaturas acompanham. É o papel do editor do Signally.