# Cabeçalhos de email animados: GIFs leves e bonitos [Canonical HTML page](https://gradiently.design/pt-pt/guide/animated-email-header) O movimento no topo de um email chama a atenção, mas as caixas de entrada são exigentes. Um bom cabeçalho animado é leve, curto e continua a fazer todo o sentido se nunca se mexer. ## The short version - Um cabeçalho de email animado é quase sempre um GIF, porque a maioria dos clientes de email mostra GIFs animados e muito poucos reproduzem vídeo. - Algumas versões de ambiente de trabalho do Outlook para Windows mostram apenas o primeiro fotograma de um GIF, por isso o primeiro fotograma tem de funcionar como design completo. - Um tamanho de cabeçalho habitual é 1200×600 píxeis, apresentado com 600 píxeis de largura para se manter nítido em ecrãs de alta densidade. - Manter o GIF leve importa porque as imagens grandes carregam devagar nos dados móveis, e os loops curtos com pouco movimento pesam menos. - As palavras importantes, como ofertas, datas e botões, pertencem a texto HTML real abaixo do cabeçalho, e não apenas dentro da animação. Um **cabeçalho de email animado** deve ser um GIF, com cerca de 1200×600 píxeis apresentado a 600 de largura, com um loop curto, peso de ficheiro moderado e um primeiro fotograma que funcione como design acabado por si só. Esta última regra é a que se esquece: algumas versões de ambiente de trabalho do Outlook para Windows mostram apenas o primeiro fotograma de um GIF animado, e quem tem as imagens bloqueadas não vê nada além do teu texto alternativo. Desenha primeiro para esses leitores e depois junta o movimento como bónus para todos os outros. ## Porque é que os cabeçalhos de email animados são GIFs O suporte de vídeo em email é raro e pouco fiável. O GIF animado, um formato de imagem, aparece na maioria dos clientes, do Apple Mail ao Gmail. Formatos mais recentes, como o WebP animado, têm suporte irregular nas caixas de entrada. Por isso o GIF continua a ser a escolha prática, com todos os seus limites: no máximo 256 cores por fotograma e ficheiros maiores do que vídeo. Esses limites moldam o design. A comparação completa está em [GIF ou MP4](https://gradiently.design/pt-pt/guide/gif-vs-mp4). | Definição | Recomendação | Porquê | | --- | --- | --- | | Formato | GIF | Reproduz-se na maioria dos clientes de email; o vídeo, quase nunca | | Tamanho de design | 1200×600 px | O dobro da largura de apresentação para ecrãs nítidos e densos | | Largura de apresentação | 600 px | A largura padrão do corpo de um email | | Duração do loop | 2 a 5 segundos | Os loops curtos pesam menos e continuam a parecer vivos | | Taxa de fotogramas | 10 a 15 fps | Suave o bastante para cor em deriva e revelações simples | | Peso do ficheiro | O mais leve possível | Os cabeçalhos grandes carregam devagar nos dados móveis | Pontos de partida para um cabeçalho que carrega depressa e fica nítido. Se o peso importa mais do que a nitidez, exporta o GIF com 600 px de largura. ## Desenha o primeiro fotograma como alternativa Trata o primeiro fotograma como o cabeçalho do email e a animação como um extra. Se as tuas palavras entram a partir do nada, quem lê no Outlook vê um bloco de cor vazio. Se o teu produto aparece no segundo dois, nunca o vê. Põe tudo o que importa no fotograma um e deixa o movimento acontecer à volta. Cabeçalho de newsletter com o texto a edição de outubro e uma pequena etiqueta de notas de campo sobre um gradiente Fotograma um: completo. Todas as palavras estão no lugar, por isso quem só vê este fotograma não perde nada. O mesmo cabeçalho de newsletter mais adiante no loop, com a cor do gradiente alterada por trás de palavras paradas A meio do loop: as palavras ficam onde estão enquanto a cor muda por trás. O movimento dá ambiente, não informação. - **Palavras paradas, fundo em movimento.** A cor em deriva atrás de um título fixo é o cabeçalho animado mais fiável que existe. - **Um pequeno movimento.** Uma palavra que muda, uma linha que se sublinha, uma ligeira mudança de luz. Uma ideia por cabeçalho. - **Termina onde começaste.** Um loop que salta de volta ao início parece avariado. Faz o último fotograma conduzir ao primeiro, como em [vídeo em loop perfeito](https://gradiently.design/pt-pt/guide/seamless-loop-video). - **Sem luzes intermitentes.** Mantém as mudanças de luminosidade lentas. Os flashes rápidos são desconfortáveis e podem ser prejudiciais. ## Manter o GIF leve A maior parte do peso de um GIF vem dos píxeis que mudam entre fotogramas. Um cabeçalho em que o quadro inteiro se move é pesado; um em que um gradiente lento deriva atrás de palavras paradas é muito mais leve, porque o codificador pode guardar apenas o que mudou. Reduzir a largura a metade reduz os píxeis a cerca de um quarto, por isso decide cedo se este cabeçalho precisa de 1200 px ou se 600 px chegam. 1. **Desenha a 1200×600** Compõe o cabeçalho com todas as palavras no lugar no primeiro fotograma. 2. **Mantém o loop curto** Dois a cinco segundos, com cada movimento a completar um ciclo inteiro. 3. **Exporta como GIF a 10 a 15 fps** Usa uma paleta construída a partir da própria animação e não uma genérica. 4. **Verifica o peso** Se estiver pesado, experimenta 600 px de largura, menos fotogramas ou menos movimento antes de reduzir a qualidade. 5. **Verifica o fotograma um sozinho** Abre o GIF num visualizador de imagens que mostre só o primeiro fotograma ou envia um teste para o Outlook no Windows. Os comandos de exportação, a paleta e as definições de dithering em pormenor estão em [GIFs animados](https://gradiently.design/pt-pt/guide/gif-maker-tips). ## HTML para um cabeçalho de email animado Programa o cabeçalho como uma imagem normal dentro de uma célula de tabela. Define a largura de apresentação no atributo e no estilo para todos os clientes a dimensionarem bem, dá-lhe um texto alternativo descritivo e define na célula uma cor de fundo igual ao primeiro fotograma do GIF. Quando as imagens estão bloqueadas, os leitores veem então a tua cor e as tuas palavras, não uma caixa vazia. ```html
The October issue: new work, three reads and a studio update
``` Um GIF de 1200×600 mostrado a 600×300. A cor da célula coincide com o primeiro fotograma e o texto alternativo estilizado lê-se bem se as imagens estiverem desligadas. > **Texto real abaixo do cabeçalho** Põe a oferta, a data e o botão em texto HTML real por baixo da imagem. Aparece com as imagens desligadas, pode ser lido por leitores de ecrã e pesquisado dentro da caixa de entrada, e fica nítido em qualquer tamanho. ## Modo escuro e bloqueio de imagens O modo escuro pode mudar as cores à volta do cabeçalho mas normalmente deixa a imagem em paz. Um cabeçalho com a sua própria cor de fundo completa aguenta-se nos dois modos; um com uma margem transparente ou branca pode acabar como uma caixa brilhante num ecrã escuro. Os gradientes CSS atrás da imagem não são fiáveis entre clientes, por isso integra o gradiente no GIF e usa uma cor sólida como alternativa. [Gradientes em email](https://gradiently.design/pt-pt/guide/gradients-in-email) trata das opções. ### Evita - Palavras que só aparecem depois do primeiro fotograma - Um GIF pesado em que o quadro inteiro se move - Margens 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 ### Faz - Um primeiro fotograma que é um design completo - Palavras paradas sobre cor em movimento lento - Uma cor de fundo completa na imagem - Texto alternativo que diz o que o cabeçalho diz - Texto HTML real para tudo aquilo em que as pessoas agem No Gradiently podes desenhar o cabeçalho no tamanho de cabeçalho de email sobre um Mark em movimento, manter as palavras paradas enquanto o Mark deriva atrás delas e exportá-lo como GIF no Pro. Como o fundo é um Mark único que te pertence, o cabeçalho parece a tua marca e não um modelo que outras newsletters partilham. Para cabeçalhos estáticos e composição, vê [design de cabeçalhos de email](https://gradiently.design/pt-pt/guide/email-header-design). ## FAQ ### Os GIFs animados funcionam em email? Na maioria dos clientes de email, sim. Algumas versões de ambiente de trabalho do Outlook para Windows mostram só o primeiro fotograma, por isso desenha esse fotograma para funcionar sozinho. ### Que tamanho deve ter um cabeçalho de email animado? Desenha-o a 1200×600 píxeis e apresenta-o com 600 píxeis de largura. Se o peso do ficheiro importa mais do que a nitidez em ecrãs densos, exporta o GIF a 600×300. ### Posso usar vídeo num cabeçalho de email? O vídeo reproduz-se em muito poucos clientes de email, por isso não é uma escolha fiável. Usa um GIF animado ou uma imagem estática com ligação para o vídeo. ### Porque é que o meu GIF de email não anima no Outlook? Algumas versões do Outlook para Windows mostram apenas o primeiro fotograma dos GIFs animados. É um limite do cliente, não do teu ficheiro, e é por isso que o primeiro fotograma deve levar a mensagem toda. ### Como reduzo o tamanho de um GIF de email? Encurta o loop, baixa a taxa de fotogramas para cerca de 10 a 15 fps, mantém a maior parte do quadro parada e considera exportar com 600 px de largura.