Use formatos de vídeo para conteúdos animados

A seção Oportunidades de seu relatório Lighthouse lista todos os GIFs animados, junto com a economia estimada em segundos obtida pela conversão desses GIFs em vídeo:

# Por que você deveria substituir GIFs animados por vídeos

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

# Crie vídeos MPEG

Existem várias maneiras de converter GIFs em vídeo. 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 em seu console:

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

Isso diz ao FFmpeg para pegar o my-animation.gif como entrada, representado pelo -i , e convertê-lo em um vídeo chamado my-animation.mp4.

# Crie vídeos WebM

Os vídeos WebM são muito menores do que os vídeos MP4, mas nem todos os navegadores oferecem suporte ao WebM, portanto, faz sentido gerar ambos.

Para usar o FFmpeg para converter my-animation.gif em um vídeo WebM, execute o seguinte comando em seu console:

ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm

# Substitua a imagem GIF por um vídeo

Os GIFs animados têm três características principais que um vídeo precisa para replicar:

• Eles são reproduzidos automaticamente.
• Eles fazem loop continuamente (no geral, entretanto é possível evitar o loop).
• Eles são silenciosos

Felizmente, você pode 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>

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

Muitos CDNs de imagem oferecem suporte à conversão de vídeo de GIF para HTML5. Você carrega um GIF para o CDN da imagem, e o CDN da imagem retorna um vídeo HTML5.

# Orientação específica para pilhas

# AMP

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

# Recursos

• Código-fonte para a auditoria Use formatos de vídeo conteúdo animado
• Substitua GIFs animados por vídeo para carregamentos de página mais rápidos
• Codelab Substitua GIFs por vídeo