Como inserir um logo na assinatura do Outlook sem que ele quebre

O logo é o elemento da assinatura que mais quebra, e quase sempre pelos mesmos motivos. No Outlook em particular, as diferenças entre as versões para Windows, Mac, Web e celular amplificam qualquer imprecisão no arquivo ou no código. Veja as quatro causas reais e o que fazer no lugar.

Causa nº 1: uma imagem colada a partir de um arquivo local

É a mais frequente. Um colaborador abre o logo no Word ou no Explorador de Arquivos, copia e cola na janela de assinatura. O Outlook então o incorpora como anexo local, com uma referência do tipo cid: ou um caminho file://.

Para o remetente, tudo parece normal. Para o destinatário, a imagem não aparece — é substituída por um quadro vazio ou por um X vermelho — porque o recurso referenciado só existe no computador de origem. O mesmo problema acontece com um logo hospedado em uma unidade de rede interna ou em uma intranet protegida por autenticação.

A regra é simples: o logo deve ficar em uma URL pública, em HTTPS, acessível sem login. Uma CDN, um bucket de armazenamento ou a hospedagem oferecida pela sua ferramenta de assinaturas.

Causa nº 2: o tamanho definido em CSS em vez de atributos HTML

O Outlook para Windows usa o mecanismo de renderização do Microsoft Word, que ignora boa parte do CSS — incluindo, muitas vezes, width e height declarados em um atributo style. A imagem aparece então no tamanho nativo: um arquivo de 1200 px de largura ocupa toda a largura da mensagem.

A solução é definir as dimensões nos atributos HTML da tag, e não apenas no CSS:

<img src="https://cdn.exemplo.com.br/logo.png"
     width="180" height="48"
     alt="Nome da empresa"
     style="display:block;border:0;width:180px;height:48px" />

Os dois são úteis: os atributos para o Outlook, o CSS para os clientes modernos. O display:block evita o espaço indesejado abaixo da imagem em alguns clientes, e border:0 remove a borda azul quando o logo é clicável.

Causa nº 3: um arquivo exportado no tamanho de exibição

Em uma tela de alta densidade — praticamente todos os notebooks recentes e todos os celulares — uma imagem exibida no tamanho nativo parece borrada. O logo deve ser exportado com o dobro do tamanho de exibição e depois limitado pelos atributos.

Para um logo exibido a 180 × 48 px, exporte um arquivo de 360 × 96 px. O tamanho do arquivo continua pequeno se o formato for bem escolhido: PNG-24 com transparência para um logo em cores chapadas, ou SVG convertido em PNG se a sua ferramenta não suportar vetores. As questões de tamanho de arquivo e formato estão detalhadas no artigo sobre o tamanho do logo na assinatura.

Causa nº 4: uma assinatura inteira em imagem

Algumas organizações exportam a assinatura inteira — nome, cargo, contatos, logo — como uma única imagem. É uma má ideia, por três motivos que se somam.

Primeiro, o Outlook bloqueia por padrão o carregamento de imagens remotas de remetentes desconhecidos: o destinatário vê um retângulo vazio no lugar dos seus contatos. Segundo, nenhum texto pode ser selecionado nem copiado: impossível aproveitar um número de telefone. Por fim, os leitores de tela não têm nada para ler, além do atributo alt.

Nome, cargo, telefone e endereço devem continuar como texto HTML. Só o logo, os ícones de redes sociais e o banner de campanha são imagens. As restrições gerais do HTML de e-mail, das quais esse comportamento depende, estão detalhadas em assinatura de e-mail em HTML.

Bom saber: sempre preencha o atributo alt do logo com o nome da empresa. Ele aparece quando a imagem é bloqueada e é lido pelas tecnologias assistivas.

O método que funciona em escala

Em um único computador, aplicar as regras acima basta. Em um parque de várias dezenas de caixas de correio, o problema deixa de ser técnico e passa a ser organizacional: cada colaborador que cola o logo manualmente reintroduz os quatro erros.

É exatamente isso que um modelo centralizado resolve. O logo é enviado uma vez, hospedado em uma URL estável, dimensionado corretamente no modelo e bloqueado: o colaborador não pode substituí-lo nem redimensioná-lo. Quando a identidade visual muda, você troca o arquivo e todas as assinaturas acompanham. Esse é o papel do editor de assinaturas do Signally, que gera um HTML já compatível com as restrições do Outlook.

Antes de qualquer implantação, teste a renderização pelo menos no Outlook para Windows, no Outlook na Web e no Outlook para celular: são os três ambientes em que as diferenças aparecem primeiro.