Logo animado em assinaturas de e-mail: suporte a GIF

Quais clientes de e-mail reproduzem GIFs animados?

A maioria. O Can I email, que testa recursos de HTML e CSS em diversos clientes, indica suporte completo a GIF animado no Apple Mail, Gmail (web, iOS e Android), Yahoo Mail, AOL, Outlook.com, Outlook para Mac, iOS e Android, Samsung E-mail, Thunderbird e ProtonMail, entre outros.

A entrada sobre GIF do Can I email foi testada pela última vez em fevereiro de 2020, e os clientes são atualizados com frequência. O novo app Outlook para Windows é baseado no Outlook na web e pode não se comportar como o Outlook clássico para desktop. Use a tabela como referência e envie e-mails de teste para você mesmo nos clientes que seus destinatários realmente usam.

Por que o Outlook no Windows não anima minha assinatura?

O Outlook para Windows mais antigo, de desktop, renderiza e-mails HTML com um mecanismo limitado que não reproduz animações de GIF. O Can I email indica que o Outlook para Windows de 2007 a 2019 não suporta GIFs animados. A Litmus diz o mesmo e recomenda fazer com que "o primeiro frame contenha tudo o que você precisa como fallback estático".

O Outlook com uma conta Microsoft 365 no Windows se comporta de outro jeito: segundo o Can I email, ele "reproduz a animação 3 vezes, depois para e mostra um botão de play para reativá-la". Ou seja, mesmo os destinatários que veem o movimento o veem por pouco tempo e, depois, uma imagem estática com um controle por cima.

Não existe nenhuma configuração que você possa adicionar à assinatura para forçar a animação nesses clientes. A solução está no design, não no código: crie o GIF de modo que ele continue funcionando quando não se move.

Como devo criar o primeiro frame?

Parta do princípio de que boa parte dos destinatários verá apenas uma imagem estática. Depois, crie o loop em torno dela:

• Comece com o logo pronto. O primeiro frame deve ser o logo completo e com as cores corretas, não uma tela vazia na qual o logo vai surgindo.
• Anime saindo da pose e voltando a ela. Um pulo, uma inclinação ou uma piscada que começa e termina na pose de repouso parece intencional quando para.
• Termine na mesma pose. Clientes que param depois de alguns loops mostram o frame em que pararem; deixar o primeiro e o último frames iguais mantém o resultado limpo.
• Evite texto dentro da animação. Coloque seu nome, cargo e links em texto HTML ao lado da imagem, para que continuem legíveis e clicáveis.

Animações de logo feitas com squash, stretch e inclinação combinam com assinaturas porque todo frame mostra a marca inteira. Revelações, transições de cortina e efeitos de partículas não funcionam, porque os primeiros frames ficam incompletos.

Qual deve ser o tamanho de um GIF de assinatura?

Não existe um padrão de e-mail para imagens de assinatura, então os números abaixo são recomendações, não regras. A Xink, fornecedora de assinaturas, recomenda manter o GIF de assinatura abaixo de cerca de 200 KB e curto, com aproximadamente 10 a 15 frames. A Litmus, ao falar de GIFs no corpo do e-mail, recomenda no máximo 1 MB; como a assinatura se repete em toda mensagem, mire bem abaixo disso.

Para criar um a partir de um loop MP4 quadrado com o FFmpeg, reduza a paleta e também a taxa de frames:

ffmpeg -t 2 -i logo-hop.mp4 \
  -vf "fps=12,scale=240:-1:flags=lanczos,split[a][b];[a]palettegen=max_colors=64[p];[b][p]paletteuse" \
  -loop 0 signature.gif

Se o arquivo ainda estiver grande demais, tente max_colors=32 ou fps=10, ou encurte o clipe.

O Gmail aceita assinaturas com GIF?

Sim. O Gmail reproduz GIFs animados na web e nos apps para iOS e Android, segundo o Can I email. Você pode inserir uma imagem na assinatura do Gmail pelo editor de assinatura, em Configurações.

O limite que as pessoas encontram é o comprimento. A documentação de suporte da Xink descreve um erro de "assinatura muito longa" a partir de 10.000 caracteres, contando o HTML da assinatura. Não conseguimos confirmar esse número em uma página de ajuda do Google, então considere-o um limite relatado. Isso importa para imagens porque uma imagem colada como dados inline (uma URI data: em base64) transforma o arquivo inteiro em texto e pode ultrapassar esse limite sozinha. Apontar para uma imagem hospedada mantém a assinatura em uma única tag <img> curta, seja qual for o tamanho do arquivo do GIF.

Devo hospedar o GIF ou incorporá-lo?

Hospede. Coloque o GIF em uma URL HTTPS pública e estável, como os arquivos estáticos do seu site, e referencie-o com dimensões explícitas e texto alternativo:

<img src="https://example.com/email/logo-120.gif"
     width="120" height="120"
     alt="Acme logo"
     style="display:block;border:0;">

• Largura e altura evitam que o layout pule e fazem os clientes exibirem o arquivo de 240 pixels em 120 pixels.
• O texto alternativo aparece quando as imagens são bloqueadas, o que muitos clientes fazem por padrão com remetentes desconhecidos.
• Uma URL estável faz com que e-mails antigos continuem funcionando. Não apague nem renomeie o arquivo depois.

Evite imagens inline em base64 pelo motivo acima, e evite arquivos de vídeo ou Lottie: clientes de e-mail não executam scripts nem players de vídeo em assinaturas, e é por isso que o formato aqui é GIF.

Para ter um loop de origem limpo, o Charmotion anima um logo enviado no modo Motion, que movimenta o logo original feito com IA, 3D ou em texto sem redesenhá-lo, e exporta MP4s de 1080×1080 e prévias em GIF de 480 pixels em todo conjunto. Rode o comando FFmpeg acima no MP4 para ter um GIF no tamanho de assinatura.

Como adicionar um logo animado à assinatura de e-mail

1. Escolha um loop que comece e termine com o logo completo. Escolha um pulo, inclinação ou piscada curta cujo primeiro e último frames mostrem o logo completo.
2. Converta para um GIF pequeno. Use o FFmpeg com fps=12, largura de 240 pixels e palettegen=max_colors=64, depois confira o tamanho do arquivo.
3. Hospede o arquivo. Envie o GIF para uma URL HTTPS pública e estável que você não vá renomear nem apagar.
4. Insira com dimensões. Referencie-o com uma tag img que defina largura, altura e texto alternativo, ou insira-o pela URL no editor de assinatura do seu cliente de e-mail.
5. Teste em clientes reais. Envie e-mails de teste para o Gmail, o Apple Mail e o Outlook para desktop no Windows e confira o frame estático.

Perguntas frequentes

Posso usar um MP4 ou Lottie em uma assinatura de e-mail?

Não de forma confiável. Os clientes de e-mail não executam JavaScript, então Lottie e Rive não conseguem reproduzir, e elementos de vídeo não são uma opção confiável em assinaturas. Um GIF animado é a escolha prática, com um primeiro frame que funcione como logo estático nos clientes que não exibem a animação.

Por que o GIF da minha assinatura para depois de alguns loops no Outlook?

O Can I email informa que o Outlook para Windows com conta Microsoft 365 reproduz um GIF animado três vezes, depois para e mostra um botão de play. Faça o loop terminar no logo completo para que o frame parado pareça intencional.

Um GIF na assinatura prejudica a entregabilidade?

Não existe uma regra oficial que relacione uma pequena imagem hospedada na assinatura à filtragem de spam. Mantenha o arquivo pequeno, hospede-o em um domínio que você controla e inclua texto real na assinatura, em vez de colocar todos os seus dados de contato dentro da imagem.

Em quais dimensões devo exportar o GIF da assinatura?

Uma abordagem comum é exportar com o dobro do tamanho de exibição, por exemplo 240 pixels de largura para um logo de 120 pixels, e depois definir os atributos width e height com o tamanho de exibição. Assim o logo fica nítido em telas de alta densidade sem aumentar muito o arquivo.

Respostas rápidas deste guia

• GIFs animados funcionam em assinaturas de e-mail do Outlook?
• Qual deve ser o tamanho de um GIF de assinatura de e-mail?

Fontes

• GIF image format support in email clients, Can I email
• How to create and add an animated GIF to an email, Litmus
• Recommended GIF specs for email signatures, Xink Support
• Gmail signature too long error (10,000 character limit), Xink Support
• FFmpeg filters documentation (palettegen, paletteuse, scale, pad), FFmpeg