Substituir GIFs por vídeo

Rob Dodson

Neste codelab, melhore o desempenho substituindo um GIF animado por um vídeo.

Medir primeiro

Primeiro, meça o desempenho do site:

  1. Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen tela cheia.
  2. Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir o DevTools.
  3. Clique na guia Lighthouse.
  4. Verifique se a caixa de seleção Desempenho está marcada na lista Categorias.
  5. Clique no botão Gerar relatório.

Quando terminar, o Lighthouse vai sinalizar o GIF como um problema na auditoria "Usar formatos de vídeo para conteúdo animado".

Instalar o FFmpeg

Há várias maneiras de converter GIFs em vídeo. Este guia usa o FFmpeg. Ele já está instalado na VM do Glitch. Se quiser, siga estas instruções para instalá-lo na sua máquina local também.

Abra o console

Verifique se o FFmpeg está instalado e funcionando:

  1. Clique em Remix to Edit para tornar o projeto editável.
  2. Clique em Terminal. Observação: se o botão "Terminal" não aparecer, talvez seja necessário usar a opção "Tela cheia".
  3. No console, execute:
which ffmpeg

Você vai receber um caminho de arquivo:

/usr/bin/ffmpeg

Mudar GIF para vídeo

  • No console, execute cd images para inserir o diretório de imagens.
  • Execute ls para conferir o conteúdo.

Você verá algo como:

$ ls
cat-herd.gif
  • No console, execute:
ffmpeg -i cat-herd.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p cat-herd.mp4

Isso instrui o FFmpeg a pegar a input, representada pela sinalização -i, de cat-herd.gif e convertê-la em um vídeo chamado cat-herd.mp4. A execução leva alguns instantes. Quando o comando for concluído, você poderá digitar ls novamente e conferir dois arquivos:

$ ls
cat-herd.gif  cat-herd.mp4

Criar vídeos WebM

Embora o MP4 esteja disponível desde 1999, o WebM é um “iniciante” relativo e lançado inicialmente em 2010. Os vídeos WebM podem ser muito menores do que os MP4, então faz sentido gerar os dois. Felizmente, o elemento <video> permite adicionar várias fontes. Portanto, se um navegador não oferecer suporte ao WebM, ele poderá usar o MP4.

  • No console, execute:
ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm
  • Para verificar o tamanho dos arquivos, faça o seguinte:
ls -lh

Você precisa ter um GIF e dois vídeos:

$ ls -lh
total 4.5M
-rw-r--r-- 1 app app 3.7M May 26 00:02 cat-herd.gif
-rw-r--r-- 1 app app 551K May 31 17:45 cat-herd.mp4
-rw-r--r-- 1 app app 341K May 31 17:44 cat-herd.webm

O GIF original tem 3, 7 MB, enquanto a versão MP4 tem 551 KB e a versão WebM tem apenas 341 KB. É uma grande economia!

Atualizar o HTML para recriar o efeito do GIF

Os GIFs animados têm três características principais que os vídeos precisam replicar:

  • Eles são reproduzidos automaticamente.
  • Elas são executadas continuamente (normalmente, mas é possível evitar esse processo).
  • Eles estão em silêncio.

Felizmente, é possível recriar esses comportamentos usando o elemento <video>.

  • No arquivo index.html, substitua a linha pelo <img> por:
<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>

Um elemento <video> que usa esses atributos é reproduzido automaticamente, em loop infinito, sem áudio e inline (ou seja, não em tela cheia), todos os comportamentos esperados de GIFs animados. 🎉

Especificar as fontes

Só falta especificar as fontes de vídeo. O elemento <video> requer um ou mais elementos filhos <source> que apontam para diferentes arquivos de vídeo que o navegador pode escolher, dependendo do suporte ao formato. Atualize o <video> com elementos <source> que vinculam aos vídeos de cat-herd:

<video autoplay loop muted playsinline>
  <source src="/images/cat-herd.webm" type="video/webm">
  <source src="/images/cat-herd.mp4" type="video/mp4">
</video>

Visualizar

  • Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen tela cheia.

A experiência precisa ser a mesma. Até aqui, tudo bem.

Verificar com o Lighthouse

Com o site aberto:

  1. Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir o DevTools.
  2. Clique na guia Lighthouse.
  3. Verifique se a caixa de seleção Desempenho está marcada na lista Categorias.
  4. Clique no botão Gerar relatório.

A auditoria "Usar formatos de vídeo para conteúdo animado" agora está aprovada. Uhuuu! 💪