Pular para o conteúdo

Como transformar um site em um GIF com rolagem

Faça um GIF animado de uma página rolando a partir de uma URL e mantenha o arquivo pequeno o bastante para e-mail, documentação e READMEs. Quando usar GIF e quando um MP4 é a melhor escolha.

Aviral LakhanpaulAtualizado em 3 min de leitura

A resposta curta

Cole a URL da página numa ferramenta que exporte GIF, como o Website Scroll Video, mantenha a rolagem abaixo de 20 segundos, em 720p ou 1080p e a 24 fps ou menos, e exporte. O GIF é a escolha certa onde vídeo não toca, como em e-mails e em alguns documentos; em todo o resto, um MP4 ou WebM da mesma rolagem fica mais nítido e várias vezes menor.

Quando o GIF é o formato certo

O GIF é um formato antigo, com uma paleta de 256 cores por quadro e uma compressão que nunca foi pensada para fotos em movimento. A rolagem de um site moderno, com degradês e imagens, é quase o pior caso para ele. O formato sobrevive porque toca em quase todo lugar, sem player, sem clique e sem regras de reprodução automática.

  • Use GIF num e-mail para um cliente ou numa newsletter, num README ou numa issue do GitHub, em documentações e wikis que não incorporam vídeo e em apps de chat que mostram GIFs direto na conversa.
  • Use MP4 ou WebM no seu próprio site, em posts nas redes sociais, em portfólios e em qualquer lugar onde uma tag <video> funcione. O mesmo movimento, cores melhores, uma fração do tamanho.

Como fazer o GIF

  1. Cole a URL

    Na página inicial, cole o endereço e deixe a página carregar. Avisos de cookies e widgets de chat são removidos antes de qualquer captura.

  2. Escolha GIF como formato

    As configurações que um GIF não comporta são limitadas para você: no máximo 24 fps, no máximo 1080p e no máximo 20 segundos.

  3. Mantenha curto e suave

    Corte a rolagem para a parte da página que importa e deixe o movimento lento. A 24 fps, uma rolagem rápida borra o texto, e num GIF isso chama mais a atenção do que num vídeo.

  4. Veja a prévia e exporte

    A prévia é grátis. Exporte quando estiver do jeito certo, e o GIF é baixado como qualquer outro arquivo.

Como manter o arquivo pequeno

O tamanho de um GIF cresce com cada pixel, cada quadro e cada cor que muda. Em ordem aproximada de impacto:

O que deixa um GIF com rolagem maior
ConfiguraçãoArquivo menorPor quê
Resolução720p em vez de 1080pMenos da metade dos pixels por quadro
DuraçãoDe 6 a 10 segundosCada segundo são mais 24 quadros inteiros
Quadros por segundo24 fps ou menosO GIF praticamente não tem compressão de movimento
FundoUma cor chapada, sem granulaçãoGranulação de filme e fotos mudam todos os pixels em todos os quadros
A páginaUm trecho de rolagem mais curtoMenos movimento por quadro, menos pixels novos

Outros jeitos de fazer um GIF de um site

  • Grave a tela e converta a gravação em GIF com um conversor ou uma ferramenta como o ffmpeg. Funciona com páginas privadas; a rolagem só é tão uniforme quanto a sua mão.
  • Captura por script com Puppeteer ou Playwright, tirando capturas de tela enquanto a página rola e juntando tudo depois. Controle total, e código para manter.
  • Ferramentas online gratuitas de URL para GIF. Existem várias, com menos configurações; a página de alternativas compara as que também fazem vídeo.

Teste no seu próprio site

Cole um link e veja a prévia da rolagem de graça. 51 créditos grátis ao criar a conta, sem cartão e sem marca d’água em nada que você exportar.

Buscas recentes

    Perguntas e respostas

    A versão curta do que as pessoas perguntam em seguida.

    Contato
    Como faço um GIF de um site rolando?

    Cole a URL numa ferramenta de URL para vídeo que exporte GIF, mantenha a rolagem curta e exporte. Ou grave a tela enquanto um script rola a página e converta a gravação em GIF.

    Por que o GIF do meu site ficou tão grande?

    O GIF guarda quase todos os quadros inteiros, então resolução, duração e taxa de quadros se multiplicam. Desça para 720p, fique abaixo de dez segundos e evite fundos fotográficos ou granulados.

    Um GIF toca dentro de um e-mail?

    Na maioria dos apps de e-mail, sim, e esse é o principal motivo para escolhê-lo. Alguns clientes de desktop só mostram o primeiro quadro, então garanta que ele funcione sozinho.

    Logotipo do Website Scroll Video, um botão de reprodução sobre uma página web em uma janela do navegador.

    Menos tempo gravando. Mais tempo criando.

    Automatize gravações de sites com movimento personalizável, controles inteligentes e opções de exportação pensadas para criadores de hoje.