Use formatos de vídeo para conteúdos animados

Published on Updated on

Translated to: English, Español

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:

Uma captura de tela da auditoria do Lighthouse Usar formatos de vídeo para conteúdo animado

See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.

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

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.