# GIFs animados: pequenos, fluidos e com a tua marca

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

O GIF é antigo, limitado e continua em todo o lado: email, chat, documentos e READMEs. Trabalha com os seus limites em vez de contra eles e o resultado pode ficar surpreendentemente bom.

## The short version

- Um GIF animado guarda no máximo 256 cores por fotograma, e é por isso que os gradientes suaves muitas vezes ficam em degraus ou salpicados.
- O que mais pesa no tamanho de um GIF são as dimensões em píxeis, o número de fotogramas e a parte da imagem que muda entre fotogramas.
- Na maioria dos GIFs desenhados, 10 a 15 fotogramas por segundo ao tamanho a que vai ser mostrado dão um bom equilíbrio entre fluidez e peso.
- Gerar uma paleta própria a partir da animação dá uma cor muito melhor do que uma paleta web genérica.
- Usa GIF onde o vídeo não reproduz, como no email, e MP4 ou WebM em todos os outros sítios.

Um bom **GIF animado** é pequeno porque foi planeado à volta dos limites do formato: um tamanho modesto em píxeis, 10 a 15 fotogramas por segundo, uma paleta criada a partir da própria animação e o mínimo possível de imagem a mudar. O GIF guarda no máximo 256 cores por fotograma e comprime muito pior do que o vídeo, por isso o mesmo loop que dá um MP4 leve pode dar um GIF pesado. Usa-o onde for a única opção, sobretudo no email e em algumas ferramentas de chat e documentos, e faz-o com cuidado.

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

| Limite | O que significa para o teu design |
| --- | --- |
| 256 cores por fotograma | Gradientes, fotografias e sombras suaves têm de caber numa paleta pequena |
| A transparência é ligada ou desligada | Sem arestas suaves: as formas suavizadas ficam com um halo sobre fundos inesperados |
| Atrasos de fotograma em centésimos de segundo | Não dá para 30 fps exatos; 10, 20, 25 ou 50 fps dividem-se bem |
| Sem som | A mensagem tem de funcionar em silêncio, o que já é boa prática |
| Compressão simples | Os ficheiros crescem depressa com o tamanho, a duração e o movimento |

Todas as decisões sobre GIFs voltam a estes cinco factos.

Os navegadores também tratam atrasos de fotograma extremamente curtos como mais lentos do que o pedido, por isso levar um GIF para taxas altas costuma dar um ficheiro maior que nem sequer reproduz mais depressa. Para perceberes porque é que a taxa de fotogramas importa, vê [a taxa de fotogramas explicada](https://gradiently.design/pt-pt/guide/frame-rate-explained).

## Como manter um GIF animado pequeno

O tamanho do ficheiro decide-se sobretudo antes de exportares. Estas são as alavancas, por ordem do que costumam pesar.

1. **Dá-lhe o tamanho a que vai ser mostrado** Um cabeçalho de email mostrado a 600 px de largura não precisa de ter 1200 px de largura como GIF, se o peso importar mais do que a nitidez em ecrãs densos. Reduzir a largura a metade reduz os píxeis a cerca de um quarto.
2. **Encurta o loop** Dois ou três segundos que fecham bem valem mais do que dez segundos que não fecham. Cada fotograma acrescenta peso.
3. **Baixa a taxa de fotogramas** 10 a 15 fps chega para cor e texto que deslizam com suavidade. Movimento lento precisa de menos fotogramas do que movimento rápido.
4. **Move menos do fotograma** Os codificadores de GIF conseguem guardar só os píxeis que mudam. Texto parado sobre uma zona de movimento lento é muito mais leve do que um fotograma inteiro em movimento.
5. **Limita as cores** Se o design só usa 64 cores, uma paleta de 64 cores é mais pequena e fica igual.

## Paletas, dithering e banding

Quando um fotograma tem mais de 256 cores, o codificador tem de escolher. Pode arredondar cada píxel à cor da paleta mais próxima, o que faz os gradientes ficarem em degraus visíveis, ou pode fazer **dithering**, espalhando píxeis de cores vizinhas para simular os tons intermédios. O dithering parece mais suave à distância e granulado de perto, e aumenta os ficheiros porque o padrão muda de fotograma para fotograma.

- Como desenhado: `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 vista exagerada do banding. Os GIFs reais têm mais degraus do que isto, mas em gradientes largos e subtis os degraus continuam a notar-se.

- **Cria a paleta a partir da animação.** Uma paleta gerada com os teus próprios fotogramas gasta as 256 posições em cores que realmente usas, e não num conjunto genérico.
- **Usa dithering ordenado em animação.** Um padrão fixo, como o de Bayer, fica no mesmo sítio entre fotogramas, por isso cintila menos e comprime melhor do que a difusão de erro.
- **Prefere gradientes mais fortes e mais curtos.** Um gradiente entre duas cores próximas numa área grande é o pior caso. Mais contraste numa área menor dá menos banding.
- **Acrescenta grão de propósito.** Um pouco de textura no design esconde os degraus, embora aumente o peso. Testa as duas hipóteses.

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

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

Se tens um vídeo e precisas de um GIF, o método de paleta em dois passos do FFmpeg dá uma cor bem melhor do que uma só passagem. O primeiro comando cria uma paleta a partir do teu clip; o segundo usa-a. Depois o Gifsicle consegue tirar mais algum 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 uma largura de 600 px servem para um cabeçalho de email. stats_mode=diff e diff_mode=rectangle favorecem as partes do fotograma que se movem.

| Utilização | Largura | Taxa de fotogramas | Duração |
| --- | --- | --- | --- |
| Cabeçalho de email | 600 a 1200 px | 10 a 15 fps | 2 a 5 segundos |
| Reação ou sticker de chat | 240 a 480 px | 10 a 15 fps | 1 a 3 segundos |
| Demonstração em documentos ou README | 800 a 1200 px | 10 a 20 fps | Tão curta quanto a demonstração permitir |
| Slide ou apresentação | 960 a 1920 px | 15 a 20 fps | 3 a 6 segundos |

Pontos de partida. Os cabeçalhos de email desenham-se a 1200×600 e mostram-se a 600 px de largura, por isso escolhe a largura consoante a nitidez ou o peso importem mais.

## Manter um GIF fiel à marca

Como a paleta é tão pequena, o GIF revela de forma invulgar se as cores da tua marca foram escolhidas com cuidado. Cores com matiz próximo fundem-se, e um fundo que depende de variações subtis pode colapsar em degraus lisos. As marcas que ficam melhor em GIF apoiam-se numa cor de fundo clara, um ou dois acentos fortes e texto grande o suficiente para sobreviver a uma paleta pequena.

Cabeçalho de email de boas-vindas com a frase obrigado por te juntares sobre um gradiente em movimento lento

Pensado para um cabeçalho de email em GIF: palavras grandes, um só fundo, cor que se move devagar para mudarem poucos píxeis.

Gráfico animado quadrado com a palavra enviado sobre um gradiente forte

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

O Gradiently exporta GIF no Pro, a par de MP4 e WebM, por isso podes desenhar uma vez e depois entregar o GIF à tua ferramenta de email e o vídeo às redes sociais. Como o fundo em movimento é um Mark que te pertence, o GIF na caixa de entrada de alguém parece a tua marca e não um loop de banco de imagens. Para email em particular, lê [cabeçalhos de email animados](https://gradiently.design/pt-pt/guide/animated-email-header) para saberes as regras de alternativa.

### Evita

- Um GIF num website onde o vídeo reproduziria
- Exportar ao dobro do tamanho e deixar o HTML encolhê-lo, sem verificar
- 30 fps para uma deriva de cor lenta
- Texto que só aparece no último fotograma
- Arestas suaves e transparentes sobre um fundo desconhecido

### Faz

- GIF para email e ferramentas que precisam de imagens; MP4 ou WebM nos outros casos
- Escolhe o tamanho de propósito e confirma o peso do ficheiro
- 10 a 15 fps, um loop curto e limpo
- Um primeiro fotograma que funcione como imagem estática
- Um fundo liso que combine com o sítio onde vai ficar

Se estás a escolher entre formatos em vez de a afinar um GIF, começa por [GIF vs MP4](https://gradiently.design/pt-pt/guide/gif-vs-mp4) e [MP4 vs WebM](https://gradiently.design/pt-pt/guide/mp4-vs-webm).

## FAQ

### Como reduzo o tamanho de um GIF animado?

Reduz as dimensões em píxeis, encurta o loop, baixa a taxa de fotogramas para cerca de 10 a 15 fps e mantém a maior parte do fotograma parada. Uma paleta criada a partir da animação e uma passagem por um otimizador como o gifsicle ajudam ainda mais.

### Porque é que os gradientes ficam às riscas num GIF?

Um fotograma de GIF guarda no máximo 256 cores, por isso um gradiente suave é arredondado em degraus. Uma paleta própria, dithering ordenado e um pouco de grão reduzem o efeito.

### Que taxa de fotogramas deve ter um GIF animado?

10 a 15 fps servem para a maioria dos GIFs desenhados. Como os atrasos de fotograma do GIF se definem em centésimos de segundo, taxas como 10, 20 ou 25 fps dividem-se melhor do que 30.

### Devo usar GIF ou MP4?

Usa MP4 ou WebM sempre que o vídeo reproduzir, porque os ficheiros são mais pequenos e a cor é melhor. Usa GIF no email e em ferramentas que só aceitam imagens.

### Um GIF pode ter fundo transparente?

Pode, mas cada píxel é totalmente transparente ou totalmente opaco, por isso as arestas suaves ficam com um rebordo visível. Faz a cor da aresta coincidir com o fundo onde vai ficar.