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:
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.