Substitua GIFs animados por vídeos para acelerar o carregamento da página

Você já viu um GIF animado em um serviço como o Imgur ou o Gfycat, o inspecionou nas suas ferramentas de desenvolvimento e descobriu que o GIF era na verdade um vídeo? Há um bom motivo para isso. Os GIFs animados podem ser enormes.

Painel de rede do DevTools mostrando um GIF de 13,7 MB.

Felizmente, essa é uma daquelas áreas de desempenho de carregamento em que é possível fazer relativamente pouco trabalho para ter grandes ganhos. Ao converter GIFs grandes em vídeos, você pode economizar muito na largura de banda dos usuários.

Medir primeiro

Use o Lighthouse para procurar GIFs que possam ser convertidos em vídeos no seu site. Nas Ferramentas do desenvolvedor, clique na guia "Audits" e marque a caixa de seleção "Performance". Em seguida, execute o Lighthouse e confira o relatório. Se você tiver GIFs que podem ser convertidos, vai aparecer uma sugestão para "Usar formatos de vídeo para conteúdo animado":

Uma auditoria do Lighthouse com falha, use formatos de vídeo para conteúdo animado.

Criar vídeos MPEG

Há várias maneiras de converter GIFs em vídeo. O FFmpeg é a ferramenta usada neste guia. Para usar o FFmpeg para converter o GIF, my-animation.gif em um vídeo MP4, execute o seguinte comando no console:

ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4

Isso informa ao FFmpeg que my-animation.gif é a entrada, indicada pela flag -i, e que ela deve ser convertida em um vídeo chamado my-animation.mp4.

O codificador libx264 só funciona com arquivos que têm dimensões pares, como 320 x 240 pixels. Se o GIF de entrada tiver dimensões estranhas, inclua um filtro de corte para evitar que o FFmpeg gere um erro de "altura/largura não divisível por 2":

ffmpeg -i my-animation.gif -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4

Criar vídeos WebM

O MP4 existe desde 1999, mas o WebM é um formato de arquivo relativamente novo, lançado inicialmente em 2010. Os vídeos WebM são muito menores que os MP4, mas nem todos os navegadores oferecem suporte a WebM. Por isso, é recomendável gerar os dois.

Para usar o FFmpeg e converter my-animation.gif em um vídeo WebM, execute o seguinte comando no console:

ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm

Compare a diferença

A economia de custo entre um GIF e um vídeo pode ser bastante significativa.

Comparação do tamanho do arquivo mostrando 3,7 MB para o GIF, 551 KB para o MP4 e 341 KB para o WebM.

Neste exemplo, o GIF inicial é de 3,7 MB, em comparação com a versão MP4, que é de 551 KB, e a versão WebM, que é de apenas 341 KB.

Substituir a imagem GIF por um vídeo

Os GIFs animados têm três características principais que um vídeo precisa replicar:

  • Eles são reproduzidos automaticamente.
  • Eles são executados continuamente (geralmente, mas é possível evitar o looping).
  • Eles estão em silêncio.

Felizmente, é possível recriar esses comportamentos usando o elemento <video>.

<video autoplay loop muted playsinline></video>

Um elemento <video> com esses atributos é reproduzido automaticamente, em loop infinito, sem áudio e em linha (ou seja, não em tela cheia), todos os comportamentos característicos esperados de GIFs animados. 🎉

Por fim, o elemento <video> requer um ou mais elementos filhos <source> que direcionam para diferentes arquivos de vídeo que o navegador pode escolher, dependendo do formato do navegador. Forneça WebM e MP4 para que, se um navegador não oferecer suporte a WebM, ele possa usar o MP4.

<video autoplay loop muted playsinline>
  <source src="my-animation.webm" type="video/webm">
  <source src="my-animation.mp4" type="video/mp4">
</video>

Efeito na maior exibição de conteúdo (LCP)

Os elementos <img> são candidatos para LCP, mas os elementos <video> sem uma imagem poster não são candidatos para LCP. A solução no caso de emulação de GIFs animados não é adicionar o atributo poster aos elementos <video>, porque essa imagem não será usada.

O que isso significa para seu site? A recomendação é usar um <video> em vez de um GIF animado, mas com a compreensão de que essa mídia não será um candidato para LCP, e o próximo candidato maior será usado. Como GIFs e <video>s costumam ser maiores e o download fica mais lento, mudar para outro candidato à LCP provavelmente vai melhorar a LCP do site.