# GIFs animados: leves, fluidos e com a cara da sua marca

[Canonical HTML page](https://gradiently.design/pt-br/guide/gif-maker-tips)

O GIF é antigo, limitado e continua em todo lugar: e-mail, chat, documentos e READMEs. Trabalhe a favor dos limites dele, não contra, e ele pode ficar surpreendentemente bonito.

## The short version

- Um GIF animado pode ter no máximo 256 cores em cada quadro, e é por isso que degradês suaves muitas vezes formam faixas ou pontilhados.
- As maiores alavancas do tamanho de um GIF são as dimensões em pixels, o número de quadros e quanto da imagem muda entre um quadro e outro.
- Para a maioria dos GIFs de design, 10 a 15 quadros por segundo no tamanho em que será exibido é um bom equilíbrio entre fluidez e peso.
- Gerar uma paleta personalizada a partir da própria animação dá cores muito melhores do que uma paleta web genérica.
- Use GIF onde vídeo não roda, como no e-mail, e use MP4 ou WebM em todo o resto.

Um bom **GIF animado** é leve porque foi planejado em torno dos limites do formato: um tamanho em pixels modesto, 10 a 15 quadros por segundo, uma paleta de cores construída a partir da própria animação e o mínimo possível do quadro mudando. O GIF guarda no máximo 256 cores por quadro e comprime de forma bem menos eficiente que o vídeo, então o mesmo loop que é um MP4 leve pode virar um GIF pesado. Use onde ele é a única opção, principalmente e-mail e algumas ferramentas de chat e documentos, e faça com cuidado.

## O que um GIF consegue e não consegue fazer

| Limite | O que significa para o seu design |
| --- | --- |
| 256 cores por quadro | Degradês, fotos e sombras suaves precisam caber numa paleta pequena |
| A transparência é tudo ou nada | Sem bordas suaves: formas com antisserrilhado ganham um halo sobre fundos inesperados |
| Atrasos de quadro em centésimos de segundo | 30 fps exatos não é possível; 10, 20, 25 ou 50 fps dividem certinho |
| Sem som | A mensagem tem que funcionar em silêncio, o que já é uma boa prática |
| Compressão simples | Os arquivos crescem rápido com tamanho, duração e movimento |

Toda decisão sobre GIF volta a esses cinco fatos.

Os navegadores também tratam atrasos de quadro muito curtos como mais lentos do que o pedido, então empurrar um GIF para taxas de quadros altas muitas vezes dá um arquivo maior que nem roda mais rápido. Para entender por que a taxa de quadros importa, veja [taxa de quadros explicada](https://gradiently.design/pt-br/guide/frame-rate-explained).

## Como manter um GIF animado leve

O tamanho do arquivo é decidido quase todo antes de exportar. Estas são as alavancas, na ordem de quanto costumam pesar.

1. **Faça no tamanho em que será exibido** Um cabeçalho de e-mail exibido com 600 px de largura não precisa ter 1200 px como GIF se o peso importa mais que a nitidez em telas densas. Cortar a largura pela metade reduz os pixels a mais ou menos um quarto.
2. **Encurte o loop** Dois ou três segundos que fecham bem o loop ganham de dez segundos que não fecham. Cada quadro acrescenta peso.
3. **Baixe a taxa de quadros** 10 a 15 fps é fluido o bastante para cores e texto que flutuam. Movimento lento precisa de menos quadros que movimento rápido.
4. **Mova menos do quadro** Os codificadores de GIF podem guardar só os pixels que mudam. Texto parado sobre uma área que se move devagar é bem mais leve que um quadro inteiro em movimento.
5. **Limite as cores** Se o design usa só 64 cores, uma paleta de 64 cores é menor e fica igual.

## Paletas, dithering e faixas

Quando um quadro tem mais de 256 cores, o codificador precisa escolher. Ele pode arredondar cada pixel para a cor mais próxima da paleta, o que faz os degradês virarem faixas visíveis, ou pode usar **dithering**, espalhando pixels de cores vizinhas para simular os tons intermediários. O dithering parece mais suave de longe e granulado de perto, e aumenta o arquivo porque o padrão muda de quadro para quadro.

- Como foi criado: `linear-gradient(90deg, #3b0764 0%, #a21caf 50%, #f9a8d4 100%)`
- Arredondado para poucas cores: `linear-gradient(90deg, #3b0764 0% 16.6%, #5b0f7a 16.6% 33.3%, #7e1594 33.3% 50%, #a21caf 50% 66.6%, #cc62c2 66.6% 83.3%, #f9a8d4 83.3% 100%)`

Uma visão exagerada das faixas. GIFs reais têm mais degraus que isso, mas em degradês largos e sutis os degraus ainda aparecem.

- **Construa a paleta a partir da animação.** Uma paleta gerada dos seus próprios quadros gasta as 256 vagas com cores que você realmente usa, não com um conjunto genérico.
- **Use dithering ordenado em animações.** Um padrão fixo como o Bayer fica parado entre os quadros, então tremula menos e comprime melhor que a difusão de erro.
- **Prefira degradês mais fortes e curtos.** Um degradê entre duas cores próximas numa área grande é o pior caso. Mais contraste numa área menor forma menos faixas.
- **Acrescente granulação de propósito.** Um pouco de textura no design esconde os degraus, embora acrescente peso. Teste os dois.

O mesmo problema em imagens paradas, e como resolvê-lo na origem, está em [faixas em degradês](https://gradiently.design/pt-br/guide/gradient-banding).

## Configurações de exportação que funcionam

Se você tem um vídeo e precisa de um GIF, o método de paleta em duas etapas do FFmpeg dá cores muito melhores que uma passada só. O primeiro comando cria uma paleta a partir do clipe; o segundo a usa. O Gifsicle ainda pode tirar mais peso.

```bash
# 1. Build a palette from the clip itself
ffmpeg -i loop.mp4 -vf "fps=12,scale=600:-1:flags=lanczos,palettegen=stats_mode=diff" palette.png

# 2. Use it, with ordered dithering that suits animation
ffmpeg -i loop.mp4 -i palette.png -lavfi "fps=12,scale=600:-1:flags=lanczos[x];[x][1:v]paletteuse=dither=bayer:bayer_scale=3:diff_mode=rectangle" loop.gif

# 3. Optional: optimise further (lossy trades a little quality for size)
gifsicle -O3 --lossy=40 loop.gif -o loop-small.gif
```

fps=12 e 600 px de largura servem para um cabeçalho de e-mail. stats_mode=diff e diff_mode=rectangle favorecem as partes do quadro que se movem.

| Uso | Largura | Taxa de quadros | Duração |
| --- | --- | --- | --- |
| Cabeçalho de e-mail | 600 a 1200 px | 10 a 15 fps | 2 a 5 segundos |
| Reação ou figurinha de chat | 240 a 480 px | 10 a 15 fps | 1 a 3 segundos |
| Demo em documentação ou README | 800 a 1200 px | 10 a 20 fps | O mais curto que a demo permitir |
| Slide ou apresentação | 960 a 1920 px | 15 a 20 fps | 3 a 6 segundos |

Pontos de partida. Cabeçalhos de e-mail são criados em 1200×600 e exibidos com 600 px de largura, então escolha a largura conforme importe mais a nitidez ou o peso.

## Como manter um GIF com a cara da marca

Como a paleta é tão pequena, o GIF é muito bom em revelar se as cores da sua marca foram escolhidas com cuidado. Cores de matiz próximo se fundem, e um fundo que depende de variações sutis pode desabar em degraus chapados. As marcas que ficam melhores em GIF se apoiam numa cor de fundo clara, um ou dois destaques fortes e texto grande o bastante para sobreviver a uma paleta pequena.

Cabeçalho de e-mail de boas-vindas dizendo obrigado por chegar sobre um degradê que se move devagar

Criado para um cabeçalho de e-mail em GIF: palavras grandes, um fundo só, cor que se move devagar para que poucos pixels mudem.

Arte quadrada animada com a palavra entregue sobre um degradê forte

Um quadrado de uma palavra para chat e documentos. Poucos elementos, contraste forte, um loop curto.

O Gradiently exporta GIF no Pro junto com MP4 e WebM, então você cria uma vez e depois entrega o GIF para a ferramenta de e-mail e o vídeo para as redes. Como o fundo em movimento é um Mark que pertence a você, o GIF na caixa de entrada de alguém parece a sua marca, não um loop de banco de imagens. Para e-mail especificamente, leia [cabeçalhos de e-mail animados](https://gradiently.design/pt-br/guide/animated-email-header) para as regras de alternativa.

### Evite

- Um GIF num site onde vídeo rodaria
- Exportar no dobro do tamanho e deixar o HTML encolher, sem conferir
- 30 fps para uma cor que flutua devagar
- Texto que só aparece no último quadro
- Bordas transparentes suaves sobre um fundo desconhecido

### Faça

- GIF para e-mail e ferramentas que pedem imagem; MP4 ou WebM no resto
- Escolha o tamanho de propósito e confira o peso do arquivo
- 10 a 15 fps, um loop curto e limpo
- Um primeiro quadro que funcione como imagem parada
- Um fundo sólido que combine com onde ele vai ficar

Se você está escolhendo entre formatos em vez de lapidar um GIF, comece por [GIF vs MP4](https://gradiently.design/pt-br/guide/gif-vs-mp4) e [MP4 vs WebM](https://gradiently.design/pt-br/guide/mp4-vs-webm).

## FAQ

### Como deixo um GIF animado menor?

Reduza as dimensões em pixels, encurte o loop, baixe a taxa de quadros para uns 10 a 15 fps e mantenha a maior parte do quadro parada. Uma paleta construída a partir da animação e uma passada num otimizador como o gifsicle ajudam ainda mais.

### Por que os degradês ficam listrados num GIF?

Um quadro de GIF pode ter no máximo 256 cores, então um degradê suave é arredondado em degraus. Uma paleta personalizada, dithering ordenado e um pouco de granulação reduzem o efeito.

### Qual deve ser a taxa de quadros de um GIF animado?

10 a 15 fps serve para a maioria dos GIFs de design. Como os atrasos de quadro do GIF são definidos em centésimos de segundo, taxas como 10, 20 ou 25 fps dividem melhor que 30.

### Devo usar GIF ou MP4?

Use MP4 ou WebM onde vídeo roda, porque os arquivos são menores e as cores são melhores. Use GIF para e-mail e para ferramentas que só aceitam imagens.

### Um GIF pode ter fundo transparente?

Sim, mas cada pixel é totalmente transparente ou totalmente sólido, então bordas suaves ganham uma franja visível. Combine a cor da borda com o fundo onde ele vai ficar.