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 alcançada com a conversão destes GIFs para vídeo:

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

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

GIFs grandes são ineficientes para exibir conteúdo animado. Ao converter GIFs grandes em vídeos, você economiza muito na largura de banda dos usuários. Considere usar vídeos MPEG4/WebM para animações e PNG/WebP para imagens estáticas em vez de GIF para economizar bytes da rede.

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 para um vídeo MP4, execute o seguinte comando no console:

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

Isso instrui o FFmpeg a usar my-animation.gif como entrada, indicado pela sinalização -i, e a converter em um vídeo chamado my-animation.mp4.

Criar vídeos WebM

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

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

Usar um serviço que converta GIFs para vídeos HTML5

Muitas CDNs de imagem são compatíveis com a conversão de vídeo GIF para HTML5. Você faz upload de um GIF para a CDN de imagem, que retorna um vídeo HTML5.

Orientações específicas para a pilha

AMP

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

Recursos