Você já viu um GIF animado em um serviço como o Imgur ou Gfycat, inspecionado nas ferramentas para desenvolvedores e descobriu que o GIF era mesmo um vídeo? Há um é um bom motivo para isso. Os GIFs animados podem ser totalmente grandes.
Felizmente, essa é uma daquelas áreas de desempenho de carregamento em que é possível trabalho relativamente pouco para ter grandes ganhos. Ao converter GIFs grandes em vídeos, você economiza muito no largura de banda.
Medir primeiro
Use o Lighthouse para procurar GIFs que possam ser convertidos em vídeos no seu site. Em DevTools, clique na guia “Auditorias” e marque a caixa de seleção “Desempenho”. Depois, execute: Lighthouse e confira o relatório. Se você tiver GIFs que possam ser convertidos, deverá ver a sugestão "Usar formatos de vídeo para conteúdo animado":
Criar vídeos MPEG
Há várias maneiras de converter GIFs em vídeo,
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 seu console:
ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
Isso instrui o FFmpeg a usar my-animation.gif como a entrada, indicada pelo
-i e convertê-la em um vídeo chamado my-animation.mp4.
O codificador libx264 só funciona com arquivos que têm dimensões uniformes, como 320px por 240 pixels. Se o GIF de entrada tiver dimensões ímpares, será possível incluir um filtro de corte para evitar que o FFmpeg gere uma "altura/largura não divisível por 2". erro:
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. Vídeos WebM são muito menores do que vídeos MP4, mas nem todos os navegadores são compatíveis com WebM. Por isso, faz sentido gerar ambos.
Para usar o FFmpeg para converter my-animation.gif em um vídeo WebM, execute o seguinte
no seu console:
ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm
Compare a diferença
A economia de custos entre um GIF e um vídeo pode ser significativa.
Neste exemplo, o GIF inicial tem 3,7 MB, em comparação com a versão MP4, que tem 551 KB, e a versão WebM, que tem apenas 341 KB!
Substituir a imagem do 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.
- Elas são executadas continuamente (normalmente, mas é possível evitar esse processo).
- Eles são silenciosos.
Felizmente, é possível recriar esses comportamentos usando o elemento <video>.
<video autoplay loop muted playsinline></video>
Um elemento <video> com esses atributos é reproduzido automaticamente e fica em loop contínuo
não reproduz áudio e é reproduzido inline (ou seja, sem tela cheia). Todos os recursos
comportamentos esperados de GIFs animados. 🎉
Por fim, o elemento <video> requer um ou mais elementos filhos <source>.
apontando para diferentes arquivos de vídeo que o navegador pode escolher, dependendo
o formato do navegador. Forneça WebM e MP4 para que, se um navegador
não for compatível com WebM, poderá voltar para 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)
Embora os elementos <img> sejam candidatos à LCP, os elementos <video> sem uma imagem poster não são candidatos à LCP. No caso de emular GIFs animados, a solução 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 é continuar usando uma <video> em vez de um GIF animado, mas entendendo que essa mídia não será candidata a LCP e será usada a próxima melhor candidata. 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.