Como GIFs animados realmente funcionam — desde quadros de tela até compressão LZW

Por que os GIFs ainda existem

O formato de intercâmbio gráfico foi criado pela CompuServe em 1987 [CompuServe, 1987]. Ele suporta animação, transparência e compressão sem perdas. É limitado a 256 cores por quadro. Não tem áudio. Produz arquivos grandes. Por todas as medidas técnicas, deveria ter sido substituída há décadas.

E ainda: Discórdia, Slack, iMessage, Twitter, Reddit e e-mail suportam GIFs nativamente. O GIPHY serve mais de 10 bilhões de GIFs por dia [GIFHY, 2020]. O formato persiste porque funciona em toda parte, não requer codec, e toca automaticamente. Nenhum outro formato tem essa combinação de suporte universal e reprodução de fricção zero.

Entender como GIFs funcionam é útil além das trivialidades — explica por que seu GIF exportado é 4MB, por que gradientes parecem em banda, e o que você pode fazer sobre isso.

Passo 1: Captura de moldura

Um GIF animado é uma sequência de imagens (frames) exibidas em ordem com um atraso entre cada uma. Para criar um de uma animação de tela, você precisa capturar o estado de tela em intervalos regulares.

Em um navegador, isso significa ler dados de pixels de um elemento HTML <canvas> em cada tempo de enquadramento — normalmente via canvas.toDataURL() ou ctx.getImageData(). A animação é avançada para o tempo-alvo, a tela é renderizada, e os pixels são capturados. A restrição da chave: você deve esperar pelo ciclo de pintura do navegador (requestAnimationFrame) antes de ler pixels, caso contrário você captura um buffer velho.

Um GIF típico a 15 FPS por 3 segundos requer 45 capturas de quadros. Na resolução 1080×1080, cada quadro é de aproximadamente 4,7 milhões de pixels.

Passo 2: Quantização de cores

GIF suporta um máximo de 256 cores por quadro, armazenado em uma tabela de cores (palette). Um quadro típico de tela tem milhares de cores distintas. Reduzir para 256 sem degradação visível é a parte mais difícil da codificação GIF.

A abordagem padrão é o algoritmo mediana de corte [Heckbert, 1982]: ordenar todos os pixels por seu canal mais vermelho, dividir a lista na mediana, repetir para verde e azul, dividindo recursivamente o espaço de cores em 256 regiões. A média de cada região torna-se uma entrada paleta. Isto é o que o gif.js — a biblioteca que o PinePaper usa — implementa no Web Workers for paralelismo [Rubaxa, gif.js].

Quantificação de cores é por isso que GIFs lidam bem com gráficos de cores planas, mas lutam com fotografias e gradientes. Um gradiente de 1080 pixels pode usar mais de 500 cores distintas. A compressão a 256 produz bandagem visível — passos discretos onde o gradiente deve ser suave.

O que você pode fazer sobre isso: Use menos cores em seu design. Formas planas, preenchimentos sólidos e texto quantizam bem. Gradientes suaves e texturas fotográficas não. Se o seu GIF tem bandagem, simplificar a paleta, não a resolução.

Passo 3: Compressão LZW

Os índices de pixels de cada frame (referências na paleta de 256 cores) são compactados usando Compressão de Lempel-Ziv-Welch (LZW) [Welch, 1984]. O LZW constrói um dicionário de sequências de byte repetidas enquanto verifica os dados. Quando ele encontra uma sequência que ele já viu antes, ele produz o índice do dicionário em vez dos bytes brutos.

Isto significa que a compressão GIF é mais eficaz quando há grandes áreas de cor repetida — fundos sólidos, formas planas, texto em uma superfície uniforme. Texturas complexas com variação de nível de pixel produzem razões de compressão fracas porque o dicionário LZW encontra poucas sequências repetidas.

Implicação prática: Um 1080×1080 GIF de texto branco em um fundo preto pode comprimir para 200KB. A mesma resolução GIF de uma fotografia complexa pode ser 8MB. O tamanho do arquivo depende mais da complexidade visual do que da resolução ou contagem de quadros.

Passo 4: Eliminação de quadros e otimização

GIF frames pode especificar um método de eliminação**: se deve limpar a tela antes de desenhar o próximo frame, deixar o frame anterior visível, ou restaurar para o Antecedentes. Os codificadores GIF inteligentes usamdiferenciação de quadros — codificando apenas os pixels que mudaram entre frames, não todo o frame.

Se sua animação tiver um fundo estático com um pequeno elemento em movimento, um GIF otimizado codifica o fundo uma vez e só atualiza a região onde o elemento se moveu. Isto reduz drasticamente o tamanho do ficheiro. O codificador do PinePaper usa gif.js que aplica esta otimização automaticamente.

Os Números

Para uma animação PinePaper típica (1080×1080, 15 FPS, 3 segundos, fundo escuro com texto animado):

Componente	Tamanho
Quadros em bruto (45 × 4,7M pixels × 3 bytes)	~634 MB
Após a quantização (256 cores, 1 byte/pixel)	~211 MB
Após compressão LZW	~2-4 MB
Com diferenciação de quadros	~1-2 MB

A taxa de compressão de bruto para final é de aproximadamente 300:1 para 600:1. A maioria disso vem da quantização de cores (3:1) e LZW (50:1 a 100:1).

Quando Usar o GIF vs Outros Formatos

Formato	Melhor para	Limitação
GIF	Suporte universal, reprodução automática, aplicativos de mensagens	256 cores, arquivos grandes, sem áudio
WebM (VP9)	Melhor qualidade, arquivos menores, web	Suporte limitado no Safari, iMessage
MP4 (H.264)	Redes sociais, leitores de vídeo	Requer codec, sem transparência
APNG	Animação colorida completa com transparência	Suporte limitado em navegadores antigos

GIF é a escolha certa quando você precisa de compatibilidade universal e auto-play. Para qualidade ou tamanho de arquivo, WebM ou MP4 são melhores.

Tenta

Abra [PinePaper Studio] (/editor), crie um design e exporte como GIF. Observe como o tamanho do arquivo muda conforme você:

• Aumentar a contagem de quadros (mais quadros = arquivo maior, proporcionalmente)
• Adicionar gradientes (quantização pobre = arquivo maior)
• Usar cores sólidas (boa quantização = arquivo menor)
• Aumentar o tamanho da tela (mais pixels por quadro = arquivo maior)

Cada mudança é uma medida do oleoduto de compressão. Você não está apenas fazendo um GIF — você está observando como a teoria da informação se aplica ao seu design.

Referências

• CompuServe (1987). Especificação do formato de troca gráfica, versão 87a.
• GIFHY (2020). Relatório Anual GIFHY: 10 bilhões de serviços diários.
• Heckbert, P. (1982). Quantização de imagens coloridas para exibição de buffer de frame. Computer Graphics (SIGGRAPH), 16(3), 297-307.
• Rubaxa. gif.js — JavaScript GIF codificador usando Web Workers. github.com/jnordberg/gif.js.
• Welch, T.A. (1984). Técnica para compressão de dados de alto desempenho. IEEE Computer, 17(6), 8-19.

---

A exportação do PinePaper GIF é gratuita — sem marca d'água, sem inscrição. Abra pinepaper.studio/editor e exporte sua primeira animação.