Use formatos de vídeo para conteúdos animados
Published on • Updated on
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](https://wd.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/MTfWMspCIMjREn2rpwlG.png?auto=format)
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
Updated on • Improve article