Benchmark de tamanho de arquivo de animação: Rive vs GIF vs WebM vs MOV vs MP4 (dados reais)

O que exatamente foi medido?

Passamos duas imagens reais pelo motor do Charmotion em 25 de outubro de 2026 e medimos cada arquivo gerado. Os dois conjuntos têm as mesmas 17 animações (10 loops, 6 reações únicas e uma intro de abertura), com 35,8 segundos de animação no total.

• Um mascote plano, de frente. A arte plana é traçada em partes vetoriais e recebe rig, então o .riv contém formas, não pixels.
• Aegis, um logo 3D brilhante de escudo com degradês suaves, reflexos e sombreamento. Artes assim são animadas como estão: os pixels originais são incorporados no .riv como camadas de imagem (o escudo e camadas separadas para os olhos) e deformados com uma malha.

O valor do runtime do Rive se refere ao @rive-app/canvas-lite 2.44.0 (rive.js mais rive.wasm), comprimido por nós com brotli na qualidade 11 e gzip no nível 9. A própria documentação do Rive informa 222 KB com brotli para o canvas-lite; nossa medição desta versão deu um valor maior, então usamos o nosso número. Os arquivos de vídeo já são comprimidos, então o tamanho deles é o que de fato trafega pela rede.

Qual o tamanho de cada formato para o conjunto completo de 17 animações?

Medido em 25 de outubro de 2026, totais para as 17 animações (o vídeo 9:16 não está incluído):

Duas coisas chamam a atenção. O .riv do mascote plano é cerca de 65 vezes menor que o conjunto em MP4, porque armazena formas e keyframes em vez de 60 frames por segundo. Já o .riv do logo 3D é bem maior que o do mascote plano, porque carrega a arte original como imagem; mesmo assim, ele é cerca de 6 vezes menor que o conjunto em MP4.

O Rive continua menor se você só precisa de uma animação em loop?

Só um pouco. Quando você conta o runtime web do Rive, um único loop com fundo transparente em .riv fica mais leve que o WebM, mas não muito, o MOV HEVC pode ser ainda mais leve, e o MP4 é o mais leve se você não precisa de transparência. Um .riv depende do runtime web do Rive, que é baixado uma única vez por site. Veja um loop idle em uma página web, considerando o que é de fato transferido:

Então, para um único clipe opaco, o MP4 é o arquivo mais leve. Para um único loop com fundo transparente, o Rive fica um pouco mais leve que o WebM, e para arte 3D detalhada o MOV HEVC é mais leve que ambos. O cenário muda assim que você precisa de um segundo estado: cada clipe de vídeo extra acrescenta centenas de kilobytes, enquanto o .riv já contém as 17 animações. Se o runtime já está na página por outro motivo, o custo de cada personagem Rive extra é só o próprio arquivo.

O tamanho do arquivo não é o custo todo. O vídeo é decodificado pelo pipeline de mídia do navegador, enquanto o Rive desenha cada frame com o próprio renderizador. Não medimos uso de CPU nem de bateria aqui, então teste no dispositivo mais lento que você pretende atender.

Por que o GIF fica tão grande com logos 3D e gradientes?

O GIF armazena no máximo 256 cores por frame e comprime com LZW, que funciona bem em áreas planas de cor idêntica e mal em gradientes suaves, sombreamento e ruído. O MDN descreve o GIF como limitado a cores indexadas de 8 bits e observa que converter imagens coloridas para GIF pode resultar em um dithering insatisfatório. O dithering, que disfarça o banding, acrescenta ainda mais variação no nível do pixel, algo com que o compressor lida mal.

Foi exatamente o que aconteceu aqui: o conjunto em GIF do mascote plano ficou 3 vezes maior que o conjunto em MP4, mas o conjunto em GIF do logo 3D ficou cerca de 7 vezes maior que o em MP4, com menos da metade da resolução (480 px contra 1080 px). Por esse motivo, o web.dev recomenda substituir GIFs animados por vídeo. O GIF também só tem transparência do tipo liga/desliga, então bordas suaves ficam com halo ou com fundo sólido.

Qual formato de animação devo usar, com base nesses números?

Para um comparativo mais aprofundado do que cada formato suporta, veja GIF vs WebM vs MP4 vs Lottie vs Rive. Para tamanho de runtime e performance entre Rive e Lottie, veja Performance: Rive vs Lottie.

Estes números vêm da própria saída do Charmotion, então refletem as nossas configurações de encoder. Os conjuntos dos planos pagos trazem os cinco formatos, por isso conseguimos medi-los lado a lado. Todo conjunto nos planos pagos inclui todos eles, além do código.

Perguntas frequentes

Quão pequeno pode ser um arquivo Rive para um personagem inteiro?

Na nossa medição, um mascote plano com 17 animações e três state machines ficou com 40.501 bytes, ou cerca de 12 KB após a compressão brotli. Artes que precisam ser incorporadas como imagem, como um logo 3D, ficam bem maiores: cerca de 1,0 MB para as mesmas 17 animações.

Preciso contar o runtime do Rive no peso da página?

Sim, uma vez por site. O runtime web canvas-lite que medimos (versão 2.44.0) tinha cerca de 373 KB com compressão brotli, somando JavaScript e WebAssembly. Depois disso, cada .riv adicional custa apenas o tamanho do próprio arquivo.

Por que meu GIF animado é maior que o mesmo vídeo?

O GIF mantém no máximo 256 cores por frame, e a compressão dele tem dificuldade com gradientes e dithering. No nosso teste, o loop idle de 4 segundos de um logo 3D ficou com 4,4 MB como GIF de 480 px e 558 KB como MP4 de 1080 px.

Respostas rápidas deste guia

• Quanto um arquivo Rive é menor que GIFs das mesmas animações?
• GIF é um bom formato para um logo animado 3D ou com gradiente?

Fontes

• Replace animated GIFs with video for faster page loads, web.dev
• Image file type and format guide, MDN Web Docs
• @rive-app/canvas-lite, npm
• Web (JS) runtime: canvas vs webgl2 vs canvas-lite, Rive
• Preloading WASM, Rive
• Video with alpha transparency on the web, Jake Archibald