Como inserir GIF em um e-mail em HTML

GIFs animados são cada vez mais usados no marketing por e-mail, com benefícios evidentes. Primeiro, um visual atraente desperta o interesse, aumenta o desejo de ler o e-mail e cria uma conexão emocional com o público. Segundo, os GIFs dão apoio visual a uma mensagem e podem explicar ideias complexas, como uma nova interface, um novo aplicativo etc.

Os GIFs ocupam menos espaço no dispositivo do destinatário. Além disso, são uma boa alternativa aos vídeos. Nem todo cliente de e-mail dá suporte a vídeos, ao passo que GIFs animados funcionam em praticamente todos os clientes desktop e móveis.

Atenção: no cliente de e-mail Outlook (2007-2016) e no do Windows Phone 7, fica visível somente o primeiro quadro do GIF. Portanto, ao criar o GIF, leve isso em consideração e faça com que o primeiro quadro seja atraente. Coloque a parte mais informativa da mensagem nele, por exemplo, um CTA. Assim, seus destinatários não perderão nada de importante quando um cliente de e-mail sem suporte a GIFs exibir uma imagem no lugar dele.

Inserir GIFs animados em e-mails em HTML é parecido com inserir imagens. Veja como fazer:

Etapa 1. Prepare o GIF que você quer usar no seu e-mail.

Você pode pesquisar um GIF em sites gratuitos ou criar seu próprio usando Adobe Photoshop, Giphy, PhotoScape ou outro software gratuito de animação.

Etapa 2. Certifique-se de que o GIF seja otimizado.

O arquivo GIF pode ser grande e demorar para carregar. Isso pode irritar os destinatários; por isso, recomendamos otimizar seu GIF antes de inseri-lo no e-mail. Diminua o tamanho do GIF para 0,5 ou 1 MB, limite o número de cores e quadros usados e mantenha a largura dos quadros abaixo de 600 px, que é a largura-padrão de um boletim por e-mail.

Etapa 3. Insira o GIF.

Insira o código-fonte da animação GIF na versão em HTML do seu e-mail.

Observe que a imagem GIF adicionada deve poder ser acessada na Internet. Faça upload do seu GIF em um site (p.ex., o Giphy), copie o link e cole o endereço da imagem no seu e-mail.

Para indicar o URL completo da imagem hospedada, use o código HTML “img src”:

<HTML>
<HEAD> <TITLE>Activity – Insert animated GIF to HTML</TITLE> </HEAD>
<BODY>
  <IMG SRC=”example.gif”>
</BODY>
</HTML>

Etapa 4. Teste o e-mail em HTML antes de enviá-lo.

Verifique o HTML completo e as versões em texto de um e-mail antes de enviá-lo. Verifique se o GIF animado funciona corretamente na sua mensagem de teste em HTML antes de enviar a campanha de gotejamento por e-mail aos seus destinatários.

Outra coisa importante: não abuse dos GIFs. Adicione um ou dois, ou você deixará o e-mail sobrecarregado e estragará toda a experiência do usuário.

Veja detalhes de como enviar e-mails em HTML no Snov.io.

Boa sorte com seus e-mails em HTML!

Isso te ajudou?

Obrigado por seu feedback!

Sinto por isso 😢

Como podemos melhorar?