GIF vs MP4 vs WebM: que formato usar para loops

GIF vs MP4 decide-se pelo sítio onde o loop vai correr. Em sites e redes sociais, o MP4 (e o seu primo aberto, o WebM) é quase sempre a escolha certa: os ficheiros costumam ser muito mais leves, a cor é suave e a reprodução é eficiente. O GIF continua a ser a escolha certa num único sítio, o email, porque a maioria das caixas de correio mostra GIFs animados e muito poucas reproduzem vídeo. Tudo o resto neste guia é pormenor sobre esta regra.

O que é realmente cada formato

O GIF é um formato de imagem do final dos anos 80 que consegue guardar vários fotogramas. Guarda cada fotograma com uma paleta de no máximo 256 cores e comprime cada um à sua maneira. O MP4 e o WebM são formatos de vídeo. 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 fotogramas em vez de guardarem cada fotograma inteiro. Num loop em que a maior parte da imagem muda devagar, essa diferença é enorme.

Porque é que os gradientes ficam mal em GIF

Um gradiente suave num fotograma de 1080 píxeis pode usar milhares de cores diferentes. Um fotograma GIF pode ter no máximo 256. O codificador tem duas opções: arredondar as cores para a mais próxima da paleta, o que produz riscas visíveis, ou espalhar píxeis de cores vizinhas para simular as intermédias, o chamado dithering, que parece salpicado e torna os ficheiros maiores. Nenhuma das duas se parece com o gradiente que desenhaste.

O grão ajuda um pouco, porque as imagens com ruído escondem os limites da paleta melhor do que as limpas. Mas a verdadeira solução é não usar GIF onde é possível usar vídeo. Faixas em gradientes explica o mesmo problema em imagens fixas.

MP4 ou WebM para sites

Num site, substitui os GIFs por um elemento de vídeo que se comporte como eles: com reprodução automática, sem som, em loop e em linha. O guia da web.dev sobre substituir GIFs animados por vídeo explica a abordagem. Oferece primeiro o WebM, que é muitas vezes mais leve, e o MP4 como alternativa que se reproduz em quase todo o lado.

<!-- 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>

Há mais dois formatos que vale a pena conhecer. O WebP animado e o AVIF animado são formatos de imagem, usados numa tag img normal como um GIF, mas com cor completa e uma compressão muito melhor. Os navegadores modernos suportam ambos. Dão jeito onde um CMS ou uma plataforma só aceita imagens, mas não servem para email. Para fundos em largura total, lê vídeos de fundo em sites.

Loops para redes sociais

As plataformas sociais são construídas à volta do vídeo, e o MP4 é o formato que todas aceitam. Quando uma plataforma aceita GIFs, muitas vezes trata-os de forma diferente de um vídeo normal, por isso um GIF raramente é uma vantagem. Exporta o loop em MP4 no tamanho da plataforma, em H.264, e deixa a plataforma fazer o resto. Publicações animadas vs estáticas trata de tamanhos e definições.

Loops em email: ainda o GIF

A maioria dos clientes de email não reproduz vídeo, por isso um GIF animado é a forma prática de pôr movimento num email. Mantém-no leve e trata o primeiro fotograma como alternativa: alguns clientes, incluindo algumas versões do Outlook clássico para Windows, mostram só o primeiro fotograma. Põe a mensagem nesse fotograma para que nada se perca. Os nossos guias sobre design de cabeçalhos de email e gradientes em email tratam do resto.

1. 1

   Mantém-no curto

   Dois a seis segundos chegam e sobram num email; cada fotograma acrescenta peso.

2. 2

   Reduz o tamanho e a taxa de fotogramas

   Exporta na largura em que é mostrado, muitas vezes 600 píxeis, e com uma taxa de fotogramas mais baixa, como 10 a 15 fotogramas por segundo, para movimentos lentos.

3. 3

   Põe a mensagem no primeiro fotograma

   Quem só vê o primeiro fotograma deve perceber a mensagem na mesma.

4. 4

   Verifica o tamanho do ficheiro

   Os GIFs pesados carregam devagar no telemóvel. Se for pesado, corta primeiro a duração, o tamanho ou as cores.

Converter entre GIF e MP4

O ffmpeg, uma ferramenta gratuita de linha de comandos, trata das duas direções. Transformar vídeo num bom GIF exige uma paleta personalizada construída 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

Que formato usar, num relance

Se fazes loops na Gradiently, o Studio exporta os dois: um vídeo (MP4 quando o navegador o consegue gravar, senão WebM) até 1080p, e um GIF com qualidade à escolha, mantido abaixo dos 15 MB. Garante que o loop se une sem falhas, seja qual for a escolha; vê loops contínuos.