GIF vs WebM vs MP4 vs Lottie vs Rive

Qual formato de animação devo usar?

Comece pelo lugar onde a animação vai rodar, depois veja se ela precisa de fundo transparente e, por fim, se precisa responder ao usuário. Isso geralmente reduz a escolha a um ou dois formatos.

Os formatos de vídeo são autossuficientes: qualquer player os exibe sem código extra. Lottie e Rive precisam de uma biblioteca de runtime, mas em troca escalam para qualquer tamanho sem perder nitidez e podem reagir ao estado do app.

Quais são as limitações do GIF?

O GIF é um formato de cores indexadas. Cada frame usa uma paleta de no máximo 256 cores, por isso gradientes, sombras suaves e artes renderizadas em 3D mostram faixas ou pontilhado visíveis.

A transparência dele é binária. A MDN a descreve como um único índice da paleta totalmente transparente, sem alfa parcial. Cada pixel de borda é totalmente opaco ou totalmente transparente, o que deixa um contorno serrilhado ou com halo quando o GIF fica sobre um fundo diferente daquele para o qual foi feito.

O GIF também comprime mal o movimento. No exemplo do web.dev, um GIF de 3,7 MB virou um MP4 de 551 KB e um WebM de 341 KB. A MDN recomenda formatos modernos, como WebP animado, AVIF ou APNG, para sequências de imagens na web.

O GIF ainda vence em um ponto: ele reproduz em quase todo lugar onde uma imagem pode ser exibida, incluindo clientes de e-mail e ferramentas de chat antigas que não reproduzem vídeo.

Por que o vídeo é menor que o GIF?

Os codecs de vídeo modernos armazenam principalmente o que muda entre os frames, usando predição de movimento e compressão com perdas ajustada à forma como as pessoas enxergam. O GIF comprime cada frame isoladamente, com LZW sem perdas e uma paleta limitada, então um clipe curto em um tamanho razoável fica pesado rapidamente.

A orientação do web.dev é substituir GIFs animados por um vídeo que se comporte como um:

<video autoplay loop muted playsinline poster="/media/loop.jpg">
  <source src="/media/loop.webm" type="video/webm">
  <source src="/media/loop.mp4" type="video/mp4">
</video>

Esses quatro atributos reproduzem o comportamento de um GIF: começar ao carregar, repetir, ficar sem som e tocar dentro da página no iPhone. A reprodução automática sem som é permitida no Chrome e no Safari do iOS.

Números reais de um conjunto Charmotion mostram o mesmo padrão. Um loop idle de 4 segundos tem 208 KB como MP4 de 1080×1080 a 60 fps e 700 KB como GIF de 480 px, ou seja, o GIF é mais de três vezes maior com menos da metade da largura.

Quais formatos suportam transparência?

Cinco dos seis formatos podem ter transparência, mas de formas bem diferentes:

• WebM VP9 (ou VP8) tem canal alfa completo. Chrome, Edge e Firefox exibem a transparência; o Safari reproduz o vídeo, mas descarta o canal alfa.
• HEVC com alfa em um arquivo .mov tem canal alfa completo nas plataformas Apple, incluindo o Safari no iOS 13+ e no macOS Catalina+.
• Rive e Lottie desenham formas vetoriais em um canvas transparente, então a transparência já é o padrão.
• GIF aceita apenas uma cor totalmente transparente, o que deixa as bordas duras e serrilhadas.
• MP4 H.264 não tem canal alfa nenhum.

Para ter um vídeo com fundo transparente que funcione em todos os principais navegadores, sirva primeiro o arquivo HEVC e depois o WebM dentro de um único elemento <video>. O markup completo e os comandos de codificação estão em Vídeo com fundo transparente em sites.

Quando Rive ou Lottie é melhor que vídeo?

Quando a animação precisa reagir. Um vídeo só pode tocar, pausar e avançar ou voltar. Um arquivo Rive ou Lottie pode trocar de estado conforme inputs vindos do seu código: um mascote que fica em loop durante o carregamento e depois toca uma reação de sucesso quando a requisição termina.

Lottie reproduz animações do After Effects exportadas como JSON com o plugin Bodymovin, com players para web, iOS, Android, React Native e Windows. O contêiner dotLottie (.lottie) comprime esse JSON e pode reunir várias animações, temas e state machines. Em 2025, a LottieFiles adicionou state machines sem código ao Lottie Creator, então dizer que "Lottie não é interativo" já não é correto.

Arquivos Rive são criados no editor do Rive e exportados como um .riv binário, com uma state machine no centro do formato. Os runtimes oficiais do Rive são open source sob a licença MIT. O blog do Rive cita um Lottie de 240 KB recriado como um .riv de 16 KB; esse é um exemplo do próprio fabricante, não um benchmark independente.

Os dois precisam de um player. O runtime web do Rive tem cerca de 222 a 648 KB com compressão brotli, dependendo do pacote, então, para um único loop decorativo, o vídeo costuma sair mais leve no total. Para um comparativo mais aprofundado, veja Rive vs Lottie.

Qual formato usar em e-mail, redes sociais, apresentações e apps?

• Posts e anúncios em redes sociais: MP4. MP4 em 1080×1080 ou 9:16 é aceito em qualquer plataforma.
• Apresentações e documentos: MP4, pela qualidade. Use GIF só se a ferramenta não incorporar vídeo.
• E-mail: GIF, porque muitos clientes de e-mail não reproduzem vídeo. Mantenha o arquivo curto e leve, e faça o primeiro frame funcionar como imagem estática.
• Loops opacos na web: MP4 (e, se quiser, WebM) em um elemento <video autoplay loop muted playsinline> em vez de um GIF.
• Sobreposições transparentes na web: MOV HEVC junto com WebM VP9.
• Interface interativa na web e em apps: Rive ou Lottie, controlados pelo seu código. Veja Rive no React e no Next.js e Rive no SwiftUI.

Se estiver em dúvida, comece pela restrição mais rígida do destino. E-mail descarta vídeo, uma sobreposição transparente descarta MP4 e uma reação a inputs do usuário descarta qualquer formato de vídeo. O que sobrar costuma ser a resposta.

A maioria dos produtos acaba usando mais de um. Um mascote pode estar no app como arquivo Rive, no site de marketing como vídeo com fundo transparente e nos e-mails de onboarding como GIF. Gerar todas as exportações a partir da mesma origem evita diferenças entre elas.

Perguntas frequentes

WebM é melhor que MP4?

Na web, o WebM (VP9) costuma comprimir melhor e aceita transparência por canal alfa, enquanto o MP4 H.264 tem a maior compatibilidade e não tem transparência. Sirva WebM e MP4 juntos e deixe o navegador escolher. Para redes sociais e apresentações, o MP4 é a opção única mais segura.

Por que meu GIF transparente tem uma borda branca ou serrilhada?

O GIF aceita apenas transparência de 1 bit, então cada pixel é totalmente opaco ou totalmente transparente. As bordas suavizadas ficam fundidas com a cor de fundo usada na exportação. Para bordas limpas, use um WebM transparente com um MOV HEVC, ou um formato vetorial como Rive ou Lottie.

Animações Lottie podem ser interativas?

Sim. Os players de Lottie já oferecem controle de reprodução há tempos e, desde 2025, o Lottie Creator da LottieFiles permite criar state machines sem código, que vão dentro de um arquivo dotLottie e rodam no player dotLottie. O Rive oferece uma lógica parecida com sua state machine nativa.

Um arquivo Rive é sempre menor que um vídeo?

O .riv em si costuma ser bem menor, muitas vezes dezenas de kilobytes para várias animações. Mas o runtime web adiciona cerca de 222 a 648 KB comprimidos, segundo a tabela de tamanhos do Rive. Para um único loop decorativo curto, um MP4 pode sair mais leve no total; com muitos estados, o Rive costuma levar vantagem.

Respostas rápidas deste guia

• Por que o GIF é ruim para animação na web?
• Como fazer um vídeo se comportar como um GIF?
• Quais formatos de arquivo vêm em um conjunto do Charmotion?

Fontes

• Image file type and format guide, MDN Web Docs
• Replace animated GIFs with video for faster page loads, web.dev
• Video with alpha transparency on the web, Jake Archibald
• Alpha transparency in Chrome video, Chrome for Developers
• lottie-web, Airbnb on GitHub
• dotLottie: the open format, LottieFiles
• State machines are finally in Lottie Creator, LottieFiles
• Runtime sizes, Rive