Skip to content
Aprender Medir Blog Case studies Sobre
Join and donate to 🇺🇦 DevFest for Ukraine, a charitable tech conference happening June 14–15 supported by Google Developers and Google Cloud.
Nesta página
  • Por que você deveria substituir GIFs animados por vídeos
  • Crie vídeos MPEG
  • Crie vídeos WebM
  • Substitua a imagem GIF por um vídeo
  • Use um serviço que converte GIFs em vídeos HTML5
  • Orientação específica para pilhas
    • AMP
  • Recursos

Use formatos de vídeo para conteúdos animados

May 2, 2019 — Atualizado Oct 4, 2019
Available in: Español, English
Appears in: Auditorias de desempenho
Nesta página
  • Por que você deveria substituir GIFs animados por vídeos
  • Crie vídeos MPEG
  • Crie vídeos WebM
  • Substitua a imagem GIF por um vídeo
  • Use um serviço que converte GIFs em vídeos HTML5
  • Orientação específica para pilhas
    • AMP
  • Recursos

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 #

  • 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
Last updated: Oct 4, 2019 — Improve article
Return to all articles
Compartilhar
assinar

Contribute

  • Registrar um bug
  • Visualizar código-fonte

Conteúdo relacionado

  • developer.chrome.com
  • Atualizações do Chrome
  • Web Fundamentals
  • Estudos de caso
  • Podcasts
  • Shows

Conectar

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Todos os produtos
  • Termos e privacidade
  • Diretrizes da comunidade

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.