Você já viu um GIF animado em um serviço como o Imgur ou o Gfycat, inspecionou-o nas ferramentas do desenvolvedor e descobriu que, na verdade, esse GIF era um vídeo? Há uma boa razão para isso. GIFs animados podem ser enormes.
Felizmente, essa é uma das áreas de desempenho de carregamento em que é possível fazer um pouco de trabalho para ter grandes ganhos. Ao converter GIFs grandes em vídeos, você economiza muito na largura de banda dos usuários.
Avaliar primeiro
Use o Lighthouse para verificar se há GIFs no seu site que possam 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 verifique o relatório. Se você tiver GIFs que possam ser convertidos, vai aparecer uma sugestão para "Use formatos de vídeo para conteúdo animado":
Criar vídeos MPEG
Há várias maneiras de converter GIFs em vídeos.
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 instrui o FFmpeg a usar my-animation.gif como a entrada (indicada pela
flag -i) e a converter 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. Vídeos WebM são muito menores que vídeos MP4, mas nem todos os navegadores são compatíveis com WebM, então faz sentido gerar ambos.
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
Compare a diferença
A economia de custos entre um GIF e um vídeo pode ser bastante significativa.
Neste exemplo, o GIF inicial é 3,7 MB, em comparação com a versão MP4, que tem 551 KB, e com 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.
- Eles se repetem continuamente, mas é possível evitar isso.
- 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, fica em loop infinitamente,
não toca áudio e é in-line (ou seja, não em tela cheia), todos os comportamentos comuns
esperados dos GIFs animados. 🎉
Por fim, o elemento <video> requer um ou mais elementos filhos <source>
que apontam para diferentes arquivos de vídeo que o navegador pode escolher, dependendo
da compatibilidade com o formato. Forneça WebM e MP4 para que, se um navegador
não oferecer suporte a 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 na Maior exibição de conteúdo (LCP, na sigla em inglês)
Embora elementos <img> sejam candidatos à LCP, elementos <video> sem uma imagem poster não são candidatos à LCP. Na emulação de GIFs animados, a solução é não adicionar o atributo poster aos elementos <video>, já que essa imagem não vai ser usada.
O que isso significa para seu site? A recomendação é manter o uso de um <video> em vez de um GIF animado, mas entendendo que essa mídia não será candidata a LCP e que o próximo maior candidato será usado. Como GIFs e <video>s geralmente são maiores e o download é mais lento, mudar para outro candidato à LCP provavelmente vai melhorar a LCP do site.