Usar formatos de vídeo para conteúdo animado

A seção "Oportunidades" do relatório do Lighthouse lista todos os GIFs animados, junto com a economia estimada em segundos obtido através da conversão desses GIFs em vídeo:

Captura de tela da auditoria "Usar formatos de vídeo para conteúdo animado" do Lighthouse

Por que você deve substituir GIFs animados por vídeo

GIFs grandes não são eficientes para exibir conteúdo animado. Ao converter GIFs grandes em vídeos, você economiza muito largura de banda larga. Use vídeos MPEG4/WebM para animações e PNG/WebP para imagens estáticas, em vez de GIF, se quiser economizar bytes de rede.

Criar vídeos MPEG

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

ffmpeg -i my-animation.gif my-animation.mp4

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

Criar vídeos WebM

Os vídeos WebM são muito menores do que os MP4, mas nem todos os navegadores oferecem suporte a WebM. Portanto, é recomendável 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

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>
  <source src="my-animation.webm" type="video/webm" />
  <source src="my-animation.mp4" type="video/mp4" />
</video>

Usar um serviço que converte GIFs em vídeos HTML5

Muitas CDNs de imagem oferecem suporte à conversão de GIF em vídeo HTML5. Você faz upload de um GIF para o CDN de imagem, e ele retorna um vídeo HTML5.

Orientações específicas para a pilha

AMP

Para conteúdo animado, use amp-anim para reduzir o uso da CPU quando o conteúdo estiver fora da tela.

Recursos