Lottie vs GIF: tamanho, qualidade e onde cada um funciona

Qual é a diferença entre Lottie e GIF?

Um GIF é uma sequência de frames em bitmap que qualquer visualizador de imagens consegue exibir. Um arquivo Lottie é uma descrição de formas vetoriais e keyframes, originalmente exportada do After Effects com o plugin Bodymovin, que uma biblioteca player desenha em tempo de execução na web, no iOS, no Android, no React Native e no Windows. A variante dotLottie (.lottie) compacta esse JSON e pode reunir várias animações, temas e state machines.

A tabela já dá uma pista da resposta: os formatos só competem nos lugares que você controla. Em todos os outros, o GIF é o único dos dois que roda.

O Lottie é sempre menor que um GIF?

Muitas vezes, mas nem sempre, e a comparação exige dois números: o arquivo da animação e o player.

Para animações vetoriais simples, a diferença no arquivo pode ser grande. A LottieFiles cita o The Washington Post, que trocou um GIF de 2 MB por um JSON Lottie de 385 KB; é um exemplo divulgado pela própria empresa, não um teste independente. O motivo é estrutural: um GIF guarda os pixels de cada frame, então o tamanho cresce com as dimensões e a duração, enquanto um arquivo Lottie guarda formas e keyframes, então o tamanho cresce com a complexidade da arte.

Isso se inverte quando o Lottie contém bitmaps incorporados, muitas camadas ou longas sequências frame a frame. Um Lottie que embala fotos é só um GIF mais pesado com um runtime junto.

Depois, some o player. Em medição do Charmotion a partir do pacote npm em 12/10/2026, o lottie-web 5.13.0 tem cerca de 76 KB com gzip na versão completa e 46 KB na versão light. O player mais recente da LottieFiles, dotlottie-web, carrega um engine WebAssembly que mediu cerca de 433 KB com brotli, mais uns 23 KB de JavaScript. Para uma única animação pequena em uma página, o player pode pesar mais que o GIF; com muitas animações, o custo se dilui rapidamente.

O GIF também não é eficiente. No exemplo do web.dev, um GIF de 3,7 MB virou um MP4 de 551 KB e um WebM de 341 KB, e é por isso que o vídeo costuma ser o melhor substituto para conteúdo raster.

Por que os GIFs ficam serrilhados em fundos transparentes?

A transparência do GIF é binária. O MDN a descreve como um único índice da paleta totalmente transparente, sem alfa parcial. Uma borda com anti-aliasing precisa de pixels semitransparentes para se misturar ao que estiver atrás dela, e o GIF não consegue armazená-los.

Os exportadores contornam isso misturando a borda com uma cor de fundo fixa (matte), geralmente branca. Fica bom em uma página branca e deixa um halo claro em uma página escura. Sem matte, a borda vira uma escadinha. De um jeito ou de outro, um GIF transparente só fica certo no fundo para o qual foi feito.

O Lottie desenha formas vetoriais em um canvas ou SVG transparente, então as bordas recebem anti-aliasing sobre o fundo real no momento da exibição. O mesmo arquivo fica limpo em um card claro, em uma seção hero escura ou em um gradiente.

O limite de 256 cores traz um segundo defeito: gradientes, sombras suaves e arte renderizada em 3D ficam com faixas ou pontilhado (dithering). O Lottie não tem limite de paleta para preenchimentos vetoriais. Mas, se a sua arte for fotográfica, nenhum dos dois formatos é ideal; um WebM transparente mais um .mov HEVC mantém as cores completas e um canal alfa de verdade.

Onde não dá para usar Lottie?

Em qualquer lugar que exiba imagens, mas não execute o seu código. Um arquivo Lottie é dado; algo precisa rodar um player para transformá-lo em pixels. Isso o exclui de:

• E-mail. Os clientes de e-mail não executam scripts nas mensagens, então não há como carregar um player Lottie. O GIF é a escolha padrão para animação em e-mail.
• Chats e uploads em redes sociais. Apps de mensagem e redes sociais aceitam arquivos de imagem e vídeo, não um JSON qualquer acompanhado de um player.
• Documentos, slides e arquivos README que aceitam imagens, mas não scripts.
• Campos de CMS limitados a imagens, a menos que a plataforma ofereça um elemento Lottie próprio, como fazem o Webflow e o Wix.

Dentro do seu próprio site ou app, o Lottie funciona onde houver um player instalado. Nesses lugares, a questão passa a ser Lottie versus vídeo versus Rive, que o guia GIF vs WebM vs MP4 vs Lottie vs Rive analisa formato por formato.

Mantenha os GIFs para e-mail curtos, leves e legíveis já no primeiro frame, porque alguns clientes mostram só esse frame.

O Lottie consome CPU que um GIF não consome?

Sim, em princípio. O navegador decodifica um GIF de forma nativa. Um player Lottie avalia formas e keyframes e os redesenha a cada frame, em JavaScript na web (o lottie-web renderiza em SVG, canvas ou HTML) ou em código nativo no mobile.

O quanto isso pesa depende da plataforma e do arquivo:

• iOS. O lottie-ios 4.0 tornou o engine de renderização Core Animation o padrão para as animações compatíveis, então a reprodução não faz mais trabalho a cada frame na thread principal. Animações que usam recursos não compatíveis voltam para o engine antigo na thread principal, que, segundo a InfoQ, podia usar de 5% a 20% de CPU ou mais.
• React Native no Android. No teste da Callstack de janeiro de 2023, em um Sony Xperia Z3 antigo, uma animação Lottie rodou a cerca de 17 FPS. É um único aparelho e um único arquivo, então encare isso como um alerta sobre hardware de entrada, não como regra geral.

Alguns hábitos práticos eliminam a maior parte da diferença: pause as animações que estão fora da tela, evite dezenas de players simultâneos e mantenha baixo o número de camadas e máscaras. Um GIF não tem esses ajustes, mas também continua decodificando enquanto está visível e não pode ser pausado sem trocar a imagem.

Quando um vídeo supera os dois?

Quando a arte é raster: fotos, renders 3D, ilustração pintada ou gravações de tela. Os codecs de vídeo guardam principalmente o que muda entre os frames, então comprimem esse tipo de conteúdo muito melhor que o GIF, e um formato vetorial simplesmente não consegue representá-lo de forma eficiente.

O web.dev recomenda substituir GIFs animados em páginas web por um elemento <video autoplay loop muted playsinline>, que se comporta como um GIF e baixa uma fração dos bytes. Para uma sobreposição transparente, sirva um .mov HEVC com alfa para o Safari e um WebM VP9 para os outros navegadores; o guia Vídeo com fundo transparente em sites traz o markup.

Dentro de apps, o vídeo ainda compartilha a principal limitação do GIF: ele pode tocar, pausar e pular para um ponto, mas não reage a estados. Se a animação precisa alternar entre carregamento, sucesso e erro, uma state machine no Lottie (via dotLottie) ou no Rive é a melhor opção.

Uma regra útil: vetorial e interativo dentro do seu produto, vídeo para clipes raster que você controla, GIF só onde nenhum dos dois reproduz.

Lottie ou GIF: qual escolher?

Escolha Lottie se:

• a animação roda dentro do seu próprio site ou app, onde você pode carregar um player;
• a arte é ilustração vetorial plana, ícones ou animação de interface;
• ela precisa ficar sobre fundos diferentes ou escalar entre densidades de tela;
• você precisa de controle de reprodução ou de comportamento por estados com as state machines do dotLottie;
• sua equipe já produz animações no After Effects ou no Lottie Creator.

Escolha GIF se:

• o destino é e-mail, um app de chat, um documento ou qualquer lugar que mostre imagens, mas não execute código;
• você precisa de um único arquivo que funcione sem nenhuma integração;
• o clipe é curto e pequeno o bastante para que o tamanho extra do GIF não faça diferença.

Se nenhuma das listas servir, porque o conteúdo é raster ou precisa ser transparente com cores completas, use vídeo. Muitas equipes usam os três: Lottie no produto, vídeo no site de marketing e GIF no e-mail.

Como entregar os dois a partir de uma única fonte?

Mantenha uma animação mestre e renderize o GIF a partir dela, em vez de manter duas versões feitas à mão que acabam divergindo. No After Effects, exporte o Lottie pelo Bodymovin e renderize um vídeo para o GIF; no Lottie Creator, use as exportações dele. Depois, converta o vídeo em GIF com uma paleta gerada, que fica muito melhor que uma conversão padrão:

ffmpeg -i loop.mp4 -vf "fps=15,scale=480:-1:flags=lanczos,split[a][b];[a]palettegen[p];[b][p]paletteuse" loop.gif

Se o arquivo ficar grande demais, reduza primeiro a taxa de frames e a largura; essas duas configurações diminuem um GIF mais rápido que qualquer outra.

Para um personagem ou mascote especificamente, o Charmotion segue o caminho oposto: você envia o personagem, mascote ou logo e geralmente recebe 17 animações em minutos como um único arquivo Rive, além de exportações sob demanda de MP4, GIF e WebM e MOV transparentes, em todos os planos pagos. Ele não produz arquivos Lottie, então se o seu produto padroniza em Lottie, mantenha seu fluxo atual e use o passo de ffmpeg acima para o GIF.

Perguntas frequentes

Dá para usar uma animação Lottie em um e-mail?

Não de forma confiável. Os clientes de e-mail não executam scripts, então não há como carregar o player de que um arquivo Lottie precisa. Para e-mail, exporte a animação como GIF, mantenha-a curta e leve e garanta que o primeiro frame funcione sozinho, porque alguns clientes mostram só esse frame.

Como converter um GIF em Lottie?

Em geral, não dá para converter de forma limpa. Um GIF é feito de frames em bitmap e o Lottie usa formas vetoriais, então um arquivo convertido apenas incorpora os frames como imagens e mantém as limitações do GIF. Para ter ganhos reais, recrie a animação em vetor no After Effects ou no Lottie Creator, ou use um formato de vídeo para conteúdo raster.

O Lottie suporta transparência?

Sim. Os players de Lottie desenham formas vetoriais sobre um canvas ou SVG transparente, então as bordas recebem anti-aliasing contra o que estiver atrás delas. O GIF só tem transparência de 1 bit, o que gera bordas serrilhadas ou um halo da cor de matte usada na exportação. O Lottie fica limpo em fundos claros, escuros e com gradiente.

O Lottie é melhor que o GIF para a velocidade de carregamento do site?

Normalmente sim, se você exibe várias animações, porque os arquivos vetoriais são pequenos e um único player atende todos. Para uma única animação minúscula, a biblioteca do player pode pesar mais que o GIF. Meça o arquivo junto com o player e considere um vídeo MP4 ou WebM quando a arte for raster.

Respostas rápidas deste guia

• O Lottie é menor que um GIF?
• Dá para usar animações Lottie em e-mail?

Fontes

• Image file type and format guide, MDN Web Docs
• Replace animated GIFs with video for faster page loads, web.dev
• lottie-web, Airbnb on GitHub
• lottie-web package, npm
• @lottiefiles/dotlottie-web package, npm
• Lottie vs GIF, LottieFiles
• lottie-ios 4.0.0 release notes, Airbnb on GitHub
• Lottie vs Rive: optimizing mobile app animation, Callstack