# Cabeçalho de e-mail animado: GIFs leves e bonitos [Canonical HTML page](https://gradiently.design/pt-br/guide/animated-email-header) Movimento no topo de um e-mail chama atenção, mas as caixas de entrada são exigentes. Um bom cabeçalho animado é leve, curto e continua fazendo todo sentido mesmo que nunca se mexa. ## The short version - Um cabeçalho de e-mail animado é quase sempre um GIF, porque a maioria dos clientes de e-mail exibe GIFs animados e pouquíssimos reproduzem vídeo. - Algumas versões do Outlook para Windows mostram só o primeiro quadro de um GIF, então o primeiro quadro precisa funcionar como um design completo. - Um tamanho comum de cabeçalho é 1200×600 pixels, exibido com 600 pixels de largura para ficar nítido em telas de alta densidade. - Manter o GIF leve importa porque imagens grandes carregam devagar nos dados móveis, e loops curtos com pouco movimento pesam menos. - Palavras importantes, como ofertas, datas e botões, devem estar em texto HTML vivo abaixo do cabeçalho, e não só dentro da animação. Um **cabeçalho de e-mail animado** deve ser um GIF, com cerca de 1200×600 pixels exibido com 600 de largura, um loop curto, peso de arquivo modesto e um primeiro quadro que funcione sozinho como design pronto. Essa última regra é a que as pessoas esquecem: algumas versões do Outlook para Windows mostram só o primeiro quadro de um GIF animado, e quem bloqueia imagens só vê o seu texto alternativo. Crie primeiro para esses leitores, e depois acrescente o movimento como bônus para todos os outros. ## Por que cabeçalhos de e-mail animados são GIFs O suporte a vídeo em e-mail é raro e pouco confiável. O GIF animado, um formato de imagem, aparece na maioria dos clientes, do Apple Mail ao Gmail. Formatos mais novos, como o WebP animado, têm suporte mais irregular nas caixas de entrada. Então o GIF continua sendo a escolha prática, com todos os seus limites: no máximo 256 cores por quadro e arquivos maiores que vídeo. Esses limites moldam o design. A comparação completa está em [GIF ou MP4](https://gradiently.design/pt-br/guide/gif-vs-mp4). | Configuração | Recomendação | Por quê | | --- | --- | --- | | Formato | GIF | Roda na maioria dos clientes de e-mail; vídeo quase nunca | | Tamanho do design | 1200×600 px | O dobro da largura de exibição para telas densas e nítidas | | Largura de exibição | 600 px | A largura padrão do corpo de um e-mail | | Duração do loop | 2 a 5 segundos | Loops curtos pesam menos e ainda parecem vivos | | Taxa de quadros | 10 a 15 fps | Suave o bastante para cor flutuando e revelações simples | | Peso do arquivo | O mais leve que conseguir | Cabeçalhos grandes carregam devagar nos dados móveis | Pontos de partida para um cabeçalho que carrega rápido e fica nítido. Se o peso importa mais que a nitidez, exporte o GIF com 600 px de largura. ## Crie o primeiro quadro como plano B Trate o primeiro quadro como o cabeçalho do e-mail e a animação como um extra. Se as suas palavras deslizam a partir do nada, um leitor no Outlook vê um bloco de cor vazio. Se o seu produto aparece no segundo dois, ele nunca vê o produto. Coloque na tela tudo o que importa no quadro um, e deixe o movimento acontecer em volta. Cabeçalho de newsletter com A edição de outubro e um pequeno rótulo Notas de campo sobre um gradiente Quadro um: completo. Todas as palavras estão no lugar, então quem só vê este quadro não perde nada. O mesmo cabeçalho de newsletter mais adiante no loop, com a cor do gradiente mudada atrás das palavras paradas No meio do loop: as palavras ficam no lugar enquanto a cor muda atrás delas. O movimento acrescenta clima, não informação. - **Palavras paradas, fundo em movimento.** Cor flutuando atrás de um título fixo é o cabeçalho animado mais confiável que existe. - **Um movimento pequeno.** Uma palavra que muda, uma linha que se sublinha, um leve deslocamento de luz. Uma ideia por cabeçalho. - **Termine onde começou.** Um loop que salta de volta ao início parece quebrado. Faça o último quadro levar ao primeiro, como em [loop perfeito](https://gradiently.design/pt-br/guide/seamless-loop-video). - **Nada de piscar.** Mantenha as mudanças de brilho lentas. Piscadas rápidas incomodam e podem fazer mal. ## Como manter o GIF leve A maior parte do peso de um GIF vem dos pixels que mudam entre quadros. Um cabeçalho em que o quadro inteiro se move é pesado; um em que um gradiente lento flutua atrás de palavras paradas é bem mais leve, porque o codificador guarda só o que mudou. Cortar a largura pela metade reduz os pixels a mais ou menos um quarto, então decida cedo se este cabeçalho precisa de 1200 px ou se 600 px bastam. 1. **Crie em 1200×600** Monte o cabeçalho com todas as palavras no lugar desde o primeiro quadro. 2. **Mantenha o loop curto** Dois a cinco segundos, com cada movimento completando um ciclo inteiro. 3. **Exporte em GIF a 10 a 15 fps** Use uma paleta construída a partir da própria animação, não uma genérica. 4. **Confira o peso** Se estiver pesado, tente 600 px de largura, menos quadros ou menos movimento antes de reduzir a qualidade. 5. **Confira o quadro um sozinho** Abra o GIF num visualizador de imagens que mostre só o primeiro quadro, ou envie um teste para o Outlook no Windows. Os comandos de exportação detalhados e as configurações de paleta e pontilhado estão em [GIFs animados](https://gradiently.design/pt-br/guide/gif-maker-tips). ## HTML para um cabeçalho de e-mail animado Codifique o cabeçalho como uma imagem comum dentro de uma célula de tabela. Defina a largura de exibição tanto no atributo quanto no estilo, para que todos os clientes dimensionem corretamente, dê um texto alternativo descritivo e defina na célula uma cor de fundo igual à do primeiro quadro do GIF. Quando as imagens estão bloqueadas, os leitores veem a sua cor e as suas palavras, e não uma caixa vazia. ```html
The October issue: new work, three reads and a studio update
``` Um GIF de 1200×600 exibido em 600×300. A cor da célula combina com o primeiro quadro, e o texto alternativo estilizado fica legível se as imagens estiverem desligadas. > **Texto vivo abaixo do cabeçalho** Coloque a oferta, a data e o botão em texto HTML real embaixo da imagem. Ele aparece com as imagens desligadas, pode ser lido por leitores de tela e pela busca da caixa de entrada, e fica nítido em qualquer tamanho. ## Modo escuro e bloqueio de imagens O modo escuro pode mudar as cores em volta do seu cabeçalho, mas normalmente deixa a imagem em si intacta. Um cabeçalho com a sua própria cor de fundo completa se mantém nos dois modos; um com borda transparente ou branca pode virar uma caixa clara numa tela escura. Gradientes CSS atrás da imagem não são confiáveis entre clientes, então incorpore o gradiente no GIF e use uma cor sólida como alternativa. [Fundo com gradiente em e-mail](https://gradiently.design/pt-br/guide/gradients-in-email) trata das opções. ### Evite - Palavras que só aparecem depois do primeiro quadro - Um GIF pesado em que o quadro inteiro se move - Bordas transparentes que destoam no modo escuro - Texto alternativo vazio ou genérico, como “cabeçalho” - A oferta e o botão só dentro da imagem ### Faça - Um primeiro quadro que é um design completo - Palavras paradas sobre cor que se move devagar - Uma cor de fundo completa na imagem - Texto alternativo que diz o que o cabeçalho diz - Texto HTML vivo para tudo em que as pessoas vão agir No Gradiently você pode criar o cabeçalho no tamanho de cabeçalho de e-mail sobre um Mark em movimento, manter as palavras paradas enquanto o Mark flutua atrás delas e exportar em GIF no Pro. Como o fundo é um Mark único que é seu, o cabeçalho tem a cara da sua marca, e não de um modelo que outras newsletters compartilham. Para cabeçalhos estáticos e layout, veja [design de cabeçalho de e-mail](https://gradiently.design/pt-br/guide/email-header-design). ## FAQ ### GIFs animados funcionam em e-mail? Na maioria dos clientes de e-mail, sim. Algumas versões do Outlook para Windows mostram só o primeiro quadro, então crie esse quadro para funcionar sozinho. ### Qual deve ser o tamanho de um cabeçalho de e-mail animado? Crie em 1200×600 pixels e exiba com 600 pixels de largura. Se o peso do arquivo importa mais que a nitidez em telas densas, exporte o GIF em 600×300. ### Posso usar vídeo no cabeçalho de um e-mail? O vídeo roda em pouquíssimos clientes de e-mail, então não é uma escolha confiável. Use um GIF animado, ou uma imagem estática com link para o vídeo. ### Por que o meu GIF de e-mail não anima no Outlook? Algumas versões do Outlook para Windows exibem só o primeiro quadro de GIFs animados. É um limite do cliente, não do seu arquivo, e é por isso que o primeiro quadro deve levar a mensagem inteira. ### Como deixar um GIF de e-mail menor? Encurte o loop, reduza a taxa de quadros para cerca de 10 a 15 fps, mantenha a maior parte do quadro parada e considere exportar com 600 px de largura.