Guia de Otimização de Tamanho GIF: Comparação de Soluções de Substituição WebP/APNG/Vídeo

O GIF foi criado em 1987, utiliza codificação de compressão LZW, e sua paleta global suporta até 256 cores. Não suporta nativamente conteúdo dinâmico de alta cor. A patente desta tecnologia de compressão expirou na década de 1990, mas a sua limitação de cores já não cumpre os requisitos de exibição das páginas web atuais.

Na maioria dos cenários, o tamanho de um GIF dinâmico de alta qualidade exportado por operadores ou designers ultrapassa os 10MB, o que abranda o carregamento da página e reduz a taxa de retenção de visitantes do site. Por esse motivo, a substituição do GIF tornou-se um requisito comum de otimização.

As animações WebP obtêm compressão com base em sequências de keyframe codificadas em VP8. Apenas os keyframes armazenam quadros completos, e os quadros adjacentes armazenam apenas áreas de diferença, o que poupa muito espaço em comparação com o armazenamento de quadro completo do GIF. As animações WebP suportam cor verdadeira de 24 bits e não têm a limitação de 256 cores do GIF.

Em testes de comparação com o mesmo tamanho e a mesma taxa de quadros, o tamanho das animações WebP é 30% a 70% menor que o do GIF original. A taxa de compressão é maior para conteúdo de alta dinâmica, e próxima do limite inferior para conteúdo de gradiente estático de baixa taxa de quadros.

O APNG é desenvolvido como uma extensão do formato PNG, suporta canais alfa de cores completas. Foi lançado em 2008 por uma equipa externa à Google, e atualmente todos os navegadores mainstream para desktop e móvel implementam suporte nativo para ele.

O APNG tem menor eficiência de compressão do que as animações WebP, mas maior do que o GIF não comprimido. O seu tamanho é normalmente 10% a 30% menor que o GIF com o mesmo conteúdo, o que o torna adequado para cenários que requerem compatibilidade com algumas ferramentas antigas de processamento PNG.

Para animações com mais de 3 segundos de duração e mais de 800px de largura, a utilização de vídeo MP4 codificado em H.264 com a tag video de HTML5 para obter reprodução em ciclo automático é a solução com maior eficiência de compressão.

De acordo com dados de 2024 do HTTP Archive, mais de 60% dos sites já utilizaram MP4 para substituir animações GIF. Com a mesma qualidade de imagem, o tamanho é apenas 10% a 20% do GIF original, o que pode reduzir significativamente o consumo de bandwidth do site.

Durante a configuração, é necessário ativar os atributos autoplay, loop e muted, e adicionar um quadro poster para melhorar a experiência de carregamento. Todos os navegadores mainstream suportam este modo de configuração.