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

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

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.

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. 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. 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. 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. 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. 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.

• 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.

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.

# 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

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.

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 para as regras de alternativa.

Se você está escolhendo entre formatos em vez de lapidar um GIF, comece por GIF vs MP4 e MP4 vs WebM.