Usar formatos de vídeo para conteúdo animado

A seção "Oportunities" do relatório do Lighthouse lista todos os GIFs animados, além da economia estimada em segundos conseguida com a 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ê pode economizar muito na largura de banda dos usuários. Se quiser economizar bytes de rede, use vídeos MPEG4/WebM para animações e PNG/WebP para imagens estáticas, em vez de GIF.

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 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 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

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 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 o upload de um GIF para a CDN de imagem, e ela 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.

Drupal

Faça upload do seu GIF para um serviço que o disponibilize para incorporação como um vídeo.

Recursos