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.
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":
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.
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.