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