Um GIF de contagem regressiva para e-mail é uma imagem animada gerada no momento em que o e-mail é aberto, contando em direção a um prazo real. Ele não pode rodar para sempre, então anima por um período limitado e depois para, e precisa ser pequeno o bastante para não inchar a mensagem. Os GIFs da Provedly animam por até três minutos, vêm em vários temas e ficam abaixo de 100 KB. Este post explica as restrições e como trabalhar dentro delas.
Como funciona um GIF de contagem regressiva para e-mail
Clientes de e-mail não executam JavaScript, então um timer ao vivo como numa página é impossível. A solução é uma imagem renderizada no momento da requisição: quando o cliente busca a imagem, o servidor calcula o tempo que falta até o prazo e produz um GIF animado cujos quadros fazem a contagem a partir daquele momento.
Daí vêm duas consequências:
- A contagem é precisa no momento da abertura. Quem abre o e-mail às 9h00 vê o tempo restante correto; quem abre às 9h30 vê trinta minutos a menos.
- Ele não consegue animar indefinidamente. Um GIF é um conjunto fixo de quadros. Um quadro por segundo durante três minutos são 180 quadros. Passando disso, o tamanho do arquivo cresce além do que o e-mail consegue carregar com conforto, então a animação roda pelo período limitado e para no último quadro.
Três minutos é bastante. Poucos leitores olham para um e-mail por mais tempo que isso e, quando voltam, a imagem é buscada de novo e a contagem recomeça a partir do tempo restante correto.
Por que o tamanho importa mais do que numa página web
Uma imagem de 500 KB num site não chama atenção. No e-mail é um problema por vários motivos:
- Alguns clientes cortam ou truncam mensagens acima de um certo tamanho, e imagens grandes inseridas no corpo contribuem para isso.
- Leitores no plano de dados do celular pagam por cada kilobyte, e carregamentos lentos fazem a contagem aparecer depois que o leitor já rolou a tela.
- GIFs grandes podem ser um sinal que empurra a mensagem para a aba de promoções em alguns sistemas de filtragem. Somos cautelosos aqui porque as regras de filtragem não são públicas, mas manter as mensagens leves nunca é a direção errada.
A Provedly mantém seus GIFs de contagem regressiva abaixo de 100 KB limitando dimensões, número de quadros e paleta. Esse orçamento é apertado o suficiente para ser seguro e generoso o suficiente para ser legível.
O que se troca pelo quê
| Alavanca | Efeito no tamanho | Efeito na qualidade |
|---|---|---|
| Dimensões | O maior fator isolado | Precisa ser legível num celular, não grande num desktop |
| Número de quadros | Linear com a duração, a uma taxa fixa | Mais quadros significam animação mais longa, não dígitos mais suaves |
| Taxa de quadros | Linear | Um quadro por segundo é tudo de que um display de segundos precisa |
| Paleta de cores | Menos cores encolhem o arquivo | Temas chapados com poucas cores comprimem muito melhor que degradês |
| Renderização do texto | Pequeno | Dígitos limpos e de alto contraste sobrevivem à compressão |
Os temas que a Provedly oferece foram desenhados em torno dessas escolhas: fundos chapados, paleta pequena, dígitos dimensionados para a tela do celular. Escolher um tema que combine com a sua marca é o nível certo de personalização; colocar fotos ou degradês atrás dos números, não.
Mantendo o GIF honesto
Um GIF de contagem regressiva está sujeito às mesmas regras de uma barra de contagem regressiva no seu site. Ele deve apontar para um prazo real, o mesmo que a barra do site e o checkout aplicam, e algo deve de fato mudar quando ele chega. Um GIF que conta até uma data que não importa é um timer falso em outro meio, e a proposta do Digital Fairness Act da UE, esperada para o fim de 2026, cita contagens regressivas falsas como uma prática que pretende combater. As regras gerais estão em /blog/honest-countdown-timers.
Pontos práticos:
- Use um único prazo. Gere o GIF com o mesmo instante da barra do site. Se o lançamento fecha sexta-feira às 17h (horário do leste dos EUA), os dois devem dizer isso. A sequência do lançamento está em /blog/launch-week-playbook.
- Diga o que termina. O texto perto da imagem deve nomear a coisa: "O preço de lançamento termina sexta-feira, 17h ET." O GIF traz o movimento; o texto traz o sentido.
- Planeje para aberturas depois do prazo. Muitas vezes um e-mail é aberto dias depois. Decida o que vê quem abre atrasado e garanta que não seja uma contagem em números negativos nem um reinício.
Alternativas, acessibilidade e design
Alguns clientes bloqueiam imagens por padrão, alguns mostram só o primeiro quadro de um GIF e alguns leitores usam leitores de tela. Prepare-se para os três casos:
- Coloque o prazo em texto simples ao lado da imagem, para que uma imagem bloqueada não perca nada essencial.
- Escreva um texto alternativo que diga o prazo, não "timer de contagem regressiva".
- Garanta que o primeiro quadro faça sentido sozinho, já que um cliente que não anima vai mostrá-lo indefinidamente.
Um bom teste é ler o e-mail com as imagens desativadas. Se a oferta, o prazo e a chamada para ação continuam claros, o GIF é um complemento e não uma dependência.
Escolhas de design que ajudam.
- Contraste. Os dígitos devem ser legíveis num relance nos temas claro e escuro dos clientes de e-mail. Os temas chapados lidam com isso melhor do que os carregados.
- Rótulos. "Dias, horas, minutos, segundos" embaixo dos dígitos eliminam a ambiguidade.
- Posição. Perto da chamada para ação, não no cabeçalho. O timer apoia a decisão; ele não é a mensagem.
- Largura. Dimensione para a tela de celular mais estreita comum e deixe os clientes de desktop exibirem pequeno. Um GIF nítido no celular fica bem num notebook; o contrário não é verdade.
Onde isso se encaixa na Provedly
O GIF de contagem regressiva para e-mail faz parte da família de barras CTA, ao lado da barra de contagem regressiva do site, do timer evergreen por visitante e do contador programado. Ele foi feito para ser gerado uma vez por campanha com o prazo real e inserido em qualquer ferramenta de e-mail como imagem. Os detalhes estão em /features#bars e na /docs.
Perguntas frequentes
Por que o GIF para de animar depois de alguns minutos?
Cada quadro aumenta o tamanho do arquivo. Três minutos a um quadro por segundo é o teto prático abaixo de 100 KB com dígitos legíveis, e poucos leitores olham um e-mail por mais tempo que isso. Reabrir o e-mail busca um GIF novo.
Posso usar o mesmo GIF em vários e-mails?
Sim. A contagem é calculada quando a imagem é solicitada, então um único arquivo serve para o anúncio, o lembrete do meio da semana e o aviso final, desde que o prazo seja o mesmo.
O que acontece se alguém abrir o e-mail depois do prazo?
Decida isso antes de enviar. O texto do e-mail deve deixar o prazo explícito para que um leitor atrasado entenda, e a imagem não deve sugerir que ainda há tempo quando não há.
Crie um GIF de contagem regressiva junto com a barra do seu site em qualquer plano: /pricing.