GIF, MP4 ou WebM: o mesmo clipe em cada formato

O GIF é de 1987. Foi criado para gráficos simples em modems lentos, ganhou animação dois anos depois e ainda é como a maioria das pessoas compartilha um loop curto. Para ver o que isso custa, transformamos dois clipes de 10 segundos em GIF, MP4 e WebM do mesmo tamanho e comparamos os arquivos.

O teste

Criamos dois clipes, cada um com 10 segundos de vídeo Full HD a 30 quadros por segundo, desenhados por código para que cada quadro original pudesse ser redesenhado depois para comparação:

• Um clipe de câmera: uma panorâmica lenta sobre a foto de um lago de montanha, com um pouco de granulado, como as imagens de um celular.
• Uma gravação de tela: a janela de um app com texto sendo digitado, um gráfico crescendo e um ponteiro de mouse se movendo.

Cada um foi convertido para 480 × 270, um tamanho típico de GIF, com os mesmos codificadores das nossas ferramentas: o conversor de vídeo para GIF no padrão de 12 quadros por segundo e 128 cores (e uma vez a 24 quadros por segundo), e o conversor de vídeo para MP4 com H.264 e WebM com VP9, ambos a 231 kilobits por segundo. Depois comparamos oito quadros de cada arquivo com os quadros originais usando o SSIM, uma pontuação de quão parecidas são duas imagens, em que 1 significa idênticas.

Resultados

No clipe de câmera a diferença é enorme. O GIF ficou 16 vezes maior que o MP4, mostrou menos da metade dos quadros e ainda pontuou mais baixo. Dobrar a taxa de quadros para 24 dobrou o arquivo para 10,5 MB, mais de 30 vezes o MP4, e não melhorou a imagem.

A gravação de tela é mais gentil com o GIF, já que cores lisas e texto nítido combinam com o limite de 256 cores. Ele pontuou 0,988, perto dos vídeos, mas o arquivo ainda ficou quase 5 vezes maior que o MP4.

Como a diferença aparece

GIF, 5,3 MBMP4, 336 KB

O GIF só pode usar 256 cores por quadro, e nosso conversor usa 128 a menos que você peça mais. Uma foto tem centenas de milhares, então o codificador escolhe uma paleta para cada quadro e troca cada pixel pela cor mais próxima dela. Áreas suaves como a água se quebram em faixas, o granulado fino vira pontos duros e, como cada quadro ganha sua própria paleta, as áreas paradas piscam um pouco.

Por que o GIF é tão maior

O motivo principal é que um GIF guarda cada quadro como uma imagem própria. Ele comprime cada um sem perda, mas não tem como dizer «este quadro é o anterior, deslocado um pouco para a esquerda». Algumas ferramentas de GIF salvam só a parte de cada quadro que mudou, o que ajuda em gravações de tela com fundo parado, mas qualquer movimento de câmera muda todos os pixels.

Os codecs de vídeo são construídos sobre essa ideia. O H.264 e o VP9 preveem cada quadro a partir dos anteriores, guardam só o que a previsão errou e descartam detalhes que o olho não vai sentir falta. Por isso 30 quadros por segundo de vídeo pesam menos que 12 quadros por segundo de GIF.

MP4 ou WebM?

Com a mesma taxa de bits, o VP9 num arquivo WebM ficou 13% menor que o H.264 num MP4 no clipe de câmera, com pontuação um pouco mais alta. Na gravação de tela foi o contrário: o codificador H.264 usou menos que seu orçamento nas partes paradas e saiu menor, os dois com qualidade quase perfeita. A diferença maior é a compatibilidade:

• MP4 com H.264 roda em qualquer lugar: todo navegador, celular, TV, app de mensagens e editor de vídeo. É o padrão seguro.
• WebM com VP9 roda em todos os navegadores atuais e é comum na web, mas alguns apps e aparelhos Apple mais antigos lidam mal com ele.

Para uma página que você controla, o WebM é uma boa escolha. Para qualquer coisa que você envia a outras pessoas, use MP4.

Quando um GIF ainda faz sentido

• E-mail. A maioria dos apps de e-mail mostra GIFs e não roda vídeo. Um GIF curto e pequeno ainda é o jeito de colocar movimento numa newsletter.
• Lugares que só aceitam imagens, como alguns fóruns, ferramentas de chat e sistemas de documentação.
• Loops minúsculos com poucas cores: um indicador de carregamento, uma captura curta de um botão, uma figurinha.

Muitos sites que mostram «GIFs», incluindo os grandes buscadores de GIF e as redes sociais, na verdade os entregam como vídeo por trás, exatamente pelos motivos acima. Na sua própria página você pode fazer o mesmo: um elemento de vídeo com autoplay, muted, loop e playsinline se comporta como um GIF, roda nos celulares e custa uma fração dos dados.

<video src="loop.mp4" autoplay muted loop playsinline></video>

Se for fazer um GIF

• Mantenha curto. O tamanho cresce a cada quadro. De dois a quatro segundos costumam bastar para um loop.
• Mantenha pequeno. 480 pixels de largura bastam para a maioria dos usos; cada vez que você dobra a largura, o tamanho mais ou menos quadruplica.
• Use de 10 a 15 quadros por segundo. Mais quadros custam mais do que acrescentam.
• Evite imagens de câmera quando puder. Gravações de tela e animações comprimem muito melhor.

O conversor de vídeo para GIF deixa você escolher a parte do vídeo, a largura, a taxa de quadros e o número de cores, e mostra o número de quadros previsto antes de começar. Para transformar um clipe tipo GIF num vídeo bem menor, use o conversor de vídeo. Os dois rodam no seu navegador.