GIF, MP4 ou WebM: qual formato usar em loops

GIF ou MP4 se decide por onde o loop vai rodar. Em sites e redes sociais, o MP4 (e o primo aberto, o WebM) quase sempre é a escolha certa: os arquivos costumam ser muito menores, a cor é suave e a reprodução é eficiente. O GIF ainda é a escolha certa num só lugar, o e-mail, porque a maioria das caixas de entrada mostra GIFs animados e pouquíssimas reproduzem vídeo. Todo o resto deste guia é detalhe dessa regra.

O que cada formato realmente é

O GIF é um formato de imagem do fim dos anos 1980 que pode guardar vários quadros. Ele guarda cada quadro com uma paleta de no máximo 256 cores e comprime cada quadro por conta própria. O MP4 e o WebM são formatos de vídeo. Eles usam codecs de vídeo modernos, como o H.264 no MP4 e o VP9 ou o AV1 no WebM, que guardam o que muda entre os quadros em vez de cada quadro por inteiro. Num loop em que a maior parte da imagem muda devagar, essa diferença é enorme.

Por que gradientes ficam feios em GIF

Um gradiente liso num quadro de 1080 pixels pode usar milhares de cores distintas. Um quadro de GIF guarda 256 no máximo. O codificador tem duas opções: arredondar as cores para a mais próxima da paleta, o que produz listras visíveis, ou espalhar pixels de cores vizinhas para simular os tons intermediários, o chamado dithering, que parece salpicado e deixa os arquivos maiores. Nenhuma das duas se parece com o gradiente que você desenhou.

O grão ajuda um pouco, porque imagens com ruído escondem melhor os limites da paleta do que as limpas. Mas a correção de verdade é não usar GIF onde o vídeo é possível. O banding em gradientes explica o mesmo problema em imagens estáticas.

MP4 ou WebM para sites

Num site, troque os GIFs por um elemento de vídeo que se comporte como um: com reprodução automática, mudo, em loop e embutido. O guia do web.dev sobre trocar GIFs animados por vídeo explica a abordagem. Ofereça o WebM primeiro, já que costuma ser menor, e o MP4 como reserva que toca em quase todo lugar.

<!-- Instead of <img src="loop.gif" alt=""> -->
<video autoplay muted loop playsinline width="600" height="600"
       poster="loop-poster.jpg">
  <source src="loop.webm" type="video/webm">
  <source src="loop.mp4" type="video/mp4">
</video>

Vale conhecer outros dois formatos. O WebP animado e o AVIF animado são formatos de imagem, usados numa tag img comum como um GIF, mas com cor completa e compressão bem melhor. Os navegadores modernos aceitam os dois. São úteis onde um CMS ou plataforma só aceita imagens, mas não para e-mail. Para fundos em largura total, leia vídeos de fundo em sites.

Loops para redes sociais

As plataformas sociais são construídas em torno do vídeo, e o MP4 é o formato que todas aceitam. Onde uma plataforma aceita upload de GIF, ela costuma tratá-lo de modo diferente de um vídeo normal, então o GIF raramente é vantagem. Exporte o seu loop como MP4 no tamanho da plataforma, em H.264, e deixe a plataforma fazer o resto. Posts animados ou estáticos trata de tamanhos e configurações.

Loops em e-mail: ainda GIF

A maioria dos clientes de e-mail não reproduz vídeo, então um GIF animado é o jeito prático de pôr movimento num e-mail. Mantenha-o pequeno e trate o primeiro quadro como reserva: alguns clientes, incluindo algumas versões do Outlook clássico para Windows, mostram só o primeiro quadro. Ponha a mensagem nesse quadro para não perder nada. Os nossos guias de design de cabeçalho de e-mail e de gradientes em e-mail tratam do resto.

1. 1

   Deixe curto

   De dois a seis segundos bastam num e-mail; cada quadro acrescenta peso.

2. 2

   Reduza o tamanho e a taxa de quadros

   Exporte na largura em que ele é exibido, muitas vezes 600 pixels, e numa taxa de quadros menor, como 10 a 15 quadros por segundo, para movimentos lentos.

3. 3

   Ponha a mensagem no quadro um

   Leitores que veem só o primeiro quadro ainda devem entender o recado.

4. 4

   Confira o tamanho do arquivo

   GIFs grandes carregam devagar nos celulares. Se ele estiver pesado, corte a duração, o tamanho ou as cores antes de qualquer outra coisa.

Convertendo entre GIF e MP4

O ffmpeg, uma ferramenta gratuita de linha de comando, faz as duas direções. Transformar vídeo num bom GIF exige uma paleta personalizada criada a partir do próprio vídeo; transformar um GIF em MP4 é mais simples.

# MP4 to GIF: 15 fps, 600 px wide, with a palette made from the clip
ffmpeg -i loop.mp4 -vf "fps=15,scale=600:-1:flags=lanczos,split[a][b];[a]palettegen[p];[b][p]paletteuse" -loop 0 loop.gif

# GIF to MP4: H.264, even dimensions, ready for the web
ffmpeg -i loop.gif -movflags +faststart -pix_fmt yuv420p \
  -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" loop.mp4

# MP4 to WebM (VP9)
ffmpeg -i loop.mp4 -c:v libvpx-vp9 -crf 34 -b:v 0 -an loop.webm

Qual formato usar, num relance

Se você faz loops no Gradiently, o Studio exporta os dois: um vídeo (MP4 onde o seu navegador consegue gravar, senão WebM) de até 1080p e um GIF com escolha de qualidade, mantido abaixo de 15 MB. Garanta que o loop se una sem emendas, qualquer que seja a sua escolha; veja os loops contínuos.