A versão curta
- 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.
Nesta página
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
O que significa para o teu design
O que significa para o teu design
O que significa para o teu design
O que significa para o teu design
O que significa para o teu design
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.
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.
- 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.
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.
# 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.gifLargura
Taxa de fotogramas
Duração
Largura
Taxa de fotogramas
Duração
Largura
Taxa de fotogramas
Duração
Largura
Taxa de fotogramas
Duração
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.
Pensado para um cabeçalho de email em GIF: palavras grandes, um só fundo, cor que se move devagar para mudarem poucos píxeis.
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 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 e MP4 vs WebM.
Perguntas frequentes
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.
Escrito pela Gradiently
A equipa por trás da Gradiently, uma ferramenta de design construída em torno dos Marks: gradientes vivos que fazem tudo o que crias parecer teu.
Ver o nosso perfil