PNGs animados em e-mail: uma alternativa aos GIFs?

Imagens animadas são uma das principais tendências de design de e-mail para 2019 . Os profissionais de marketing por e-mail em todos os lugares estão procurando adicionar movimento às suas campanhas - e a maneira mais popular de fazer isso é usando o poder dos GIFs animados.

Mas os GIFs animados não são o único tipo de arquivo que permite adicionar movimento às imagens. Gráficos de rede portátil animados - ou APNGs - são uma opção que você também pode querer explorar.

Razões para usar APNGs em e-mail

Um PNG animado é exatamente o que o nome sugere: uma coleção de PNGs que são combinados para introduzir movimento. Portanto, para entender o que torna um APNG especial, é fundamental entender as características de um PNG simples.

Existem dois tipos de formatos PNG: PNG-8 e PNG-24. O formato PNG-8 é semelhante aos GIFs, pois são salvos com 256 cores no máximo. O formato PNG-24 é capaz de exibir milhões de cores. Portanto, em comparação com as cores limitadas de um GIF, que geralmente dão às animações uma aparência de baixa qualidade, os APNGs permitem que você use toda a gama de profundidades de cores . Isso dá às suas imagens uma aparência mais nítida - especialmente quando você usa fotografia com uma ampla gama de cores - mas uma qualidade superior sempre tem um custo. Se você não observar cuidadosamente o tamanho dos arquivos, os PNGs podem se tornar muito grandes. Se você estiver usando muitos deles para criar um APNG, os tamanhos de arquivo grandes podem afetar negativamente o tempo de carregamento de seus e-mails.

Além disso, ao contrário dos GIFs, os APNGs permitem que você trabalhe com transparência . GIFs funcionam de maneira transparente, aplicando uma borda branca áspera ao redor dos elementos quando definidos em um fundo transparente:

Por que você quer usar uma animação sobre um fundo transparente, você pergunta?

Transparência e animações no e-mail: APNGs no boletim informativo de outubro do Litmus

Para o nosso boletim informativo de outubro com o tema Halloween, queríamos dar aos nossos leitores a oportunidade de “desligar as luzes”, mudando o e-mail de um design brilhante para um escuro e assustador. Além disso, para aumentar o assombro, decidimos incluir alguma animação para fazer olhos assustadores piscarem no escuro, fantasmas pairando e gosma, mas apenas quando as luzes são desligadas.

Para ocultar as animações na versão brilhante do e-mail, nós as projetamos na mesma cor do plano de fundo em que foram colocadas na versão brilhante. Quando um assinante “apagou as luzes”, as cores de fundo mudaram e - surpresa - tornaram nossas animações assustadoras visíveis!

Para que esse truque funcionasse, as animações tinham que viver em um fundo transparente - e é exatamente por isso que usar GIFs não era uma opção para nós. Se tivéssemos usado um GIF, você veria aquelas bordas brancas ao redor de nossas ilustrações, o que teria parecido bagunçado e exposto nossos gráficos ocultos quando as luzes estivessem acesas. Os PNGs animados, por outro lado, lidam perfeitamente com o desafio da transparência.

Consideramos uma tática alternativa para resolver esse problema, animando uma folha de sprite de PNGs usando quadros-chave de animação CSS . Mas, no contexto deste projeto, a quantidade de CSS envolvida para cada gráfico teria resultado em um e-mail com muito código. E ainda mais significativo, o suporte ao cliente de e-mail para PNGs animados ultrapassou o suporte para animação CSS nos últimos anos.

Suporte ao cliente por e-mail para APNGs

Muitos clientes de e-mail populares oferecem suporte total para APNGs. As exceções mais problemáticas são o Gmail (cliente de webmail e aplicativos móveis), Outlook.com e Outlook no Windows. Esses clientes de e-mail mostram apenas o primeiro quadro da animação.

PNGs animados são totalmente suportados em:

• Apple Mail
• iOS
• Samsung Mail
• Outlook (MacOS)
• Outlook.com
• Aplicativo Outlook.com
• AOL
• App AOL
• Yahoo
• App yahoo

Apenas o primeiro quadro é mostrado em:

• Gmail
• App Gmail
• Outlook (Windows)

Como criar PNGs animados para suas campanhas de e-mail

No momento, não é possível salvar animações como APNGs de softwares como Adobe Photoshop ou Adobe Animate, portanto, você precisará de ferramentas adicionais para criar suas animações. Veja como criamos os PNGs animados para nosso boletim informativo:

1. Crie sua animação em Adobe CC e salve cada quadro como PNG

Usamos Adobe Animate para criar nossas animações - não importa se é um GIF ou um APNG. A diferença, porém, é que o Adobe Animate não oferece uma opção nativa para exportar um arquivo APNG. Em vez disso, você terá que exportar cada quadro como um único PNG. Depois de criar sua animação, vá para Exportar> Exportar filme e selecione “Sequência PNG” no menu suspenso.

O processo no Photoshop é muito semelhante. Vá para Arquivo> Exportar> Renderizar vídeo . No painel Render Video , selecione “Photoshop Image Sequence” no menu suspenso e escolha PNG como formato. Você precisa dar mais um passo para garantir que seus pngs sejam transparentes: na caixa Render Options , selecione “Straight - Unmatted” no menu suspenso “Alpha Channel” . Depois de selecionar onde deseja salvar as imagens, clique no botão Render .

2. Combine seus PNGs individuais em um APNG

Agora é hora de reunir seus arquivos de imagem individuais em um APNG!

O animador PNG é um ótimo software que você pode comprar por um pequeno preço na App Store da Apple se você for um usuário de sistema operacional. Uma alternativa gratuita é o criador de PNG animado da ezgif.com, que oferece uma funcionalidade semelhante.

Optamos por usar a ferramenta online para completar nossos arquivos. Aqui, pudemos excluir todos os quadros que não eram exigidos no arquivo final e definir a quantidade de tempo que cada quadro exigia.

3. Otimizando o tamanho do arquivo APNG para uso em e-mails

Como os GIFs, os APNGs podem rapidamente se tornar bastante pesados. Reduzir as cores e o número de quadros usados ​​ajudará a manter os tamanhos dos arquivos baixos. A compactação zlib padrão parecia ser a única opção que funcionava para nossos arquivos, e assim que clicamos no botão Make APNG! botão, podemos ver um exemplo de nossa animação e seu tamanho de arquivo antes de baixar. Esta é uma grande chance de fazer mais alterações - como alterar a velocidade ou remover mais alguns quadros - antes de fazer o download.

Antes de enviar nossos arquivos de imagem para uso em nosso e-mail, fomos capazes de compactá-los um pouco mais. Simplesmente executamos nossos APNGs por meio do TinyPNG , que diminui o tamanho dos arquivos removendo metadados e reduzindo cores, preservando a transparência e a animação. Fez uma grande diferença, reduzindo o tamanho total do arquivo de imagem de 943kb para 243kb, economizando mais de 74% no tamanho do arquivo! No entanto, nem todas as ferramentas de compactação PNG preservam a animação, portanto, verifique novamente seu trabalho depois que as imagens forem processadas.

E é isso! Agora você está pronto para adicionar um APNG ao seu e-mail, como faria com qualquer outro tipo de imagem. Se você quiser ver nosso boletim informativo completo em ação, pode visualizá-lo aqui ou verificar o código no Litmus Builder .

Qual é a sua opinião sobre o uso de APNGs por e-mail?

Você já usou PNGs animados em suas campanhas de e-mail? Quais são as ferramentas nas quais você confia para criá-los - e manter o tamanho do arquivo baixo? Adoraríamos ouvir sobre sua experiência. Compartilhe suas aprendizagens nos comentários abaixo.