Você já viu um GIF animado em um serviço como o Imgur ou o Gfycat, inspecionou-o nas ferramentas para desenvolvedores e descobriu que o GIF era um vídeo? Há um bom motivo para isso. Os GIFs animados podem ser enormes.
Felizmente, essa é uma das áreas de performance de carregamento em que você pode fazer um trabalho relativamente pequeno para obter 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 verificar se há GIFs no seu site que podem ser convertidos em vídeos. No DevTools, clique na guia "Auditorias" 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ídeos.
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 para usar my-animation.gif como a entrada, indicada pela flag
-i, e para convertê-lo 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 ímpares, você poderá incluir um filtro de corte para evitar que o FFmpeg gere um erro "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
Embora o MP4 exista desde 1999, o WebM é um formato de arquivo relativamente novo, lançado inicialmente em 2010. Os vídeos WebM são muito menores do que os vídeos MP4, mas nem todos os navegadores são compatíveis com o WebM. Por isso, faz sentido gerar os dois.
Para usar o FFmpeg para 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
Comparar a diferença
A economia de custos entre um GIF e um vídeo pode ser bastante 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 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 reproduzidos em loop contínuo (geralmente, mas é possível impedir a repetição).
- Eles são silenciosos.
Felizmente, você pode recriar esses comportamentos usando o elemento <video>.
<video autoplay loop muted playsinline></video>
Um elemento <video> com esses atributos é reproduzido automaticamente, em loop contínuo,
sem áudio e inline (ou seja, não em tela cheia), todos os comportamentos característicos
esperados de GIFs animados. 🎉
Por fim, o elemento <video> exige um ou mais elementos filhos <source>
que apontam para diferentes arquivos de vídeo que o navegador pode escolher, dependendo
do suporte de formato do navegador. Forneça WebM e MP4 para que, se um navegador não for compatível com WebM, ele possa 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 no Largest Contentful Paint (LCP)
Embora os elementos <img> sejam candidatos ao LCP, os elementos <video> sem uma imagem poster não são candidatos ao 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 o entendimento de que essa mídia não será candidata ao LCP, e o próximo maior candidato será usado. Como os GIFs e <video>s são normalmente maiores e, portanto, mais lentos para fazer o download, a mudança para um candidato LCP diferente provavelmente vai melhorar o LCP do site.