Criar GIF para README do GitHub — demo de projeto em loop automático
Um GIF animado no README do GitHub vale mais que mil palavras de documentação. Ver uma CLI em ação, uma animação de UI ou a reprodução de um bug em loop automático comunica o comportamento do software de forma instantânea — sem que o leitor precise clicar em play ou navegar para outro link. O Conversor de Vídeo para GIF do WikiPlus transforma gravações de ecrã em GIFs otimizados para GitHub em segundos, completamente no navegador.
Por que GIF funciona melhor que vídeo em READMEs do GitHub
O GitHub suporta vídeos nos READMEs desde 2021, mas com uma desvantagem crítica: vídeos exibem um botão de play e requerem clique para iniciar. GIFs reproduzem automaticamente assim que o README carrega. Para demonstrações de software onde o objetivo é mostrar o comportamento do produto em funcionamento sem fricção de interação, a reprodução automática do GIF é superior. Adicionalmente, GIFs são exibidos consistentemente em todos os ambientes onde README é renderizado: GitHub.com, API do GitHub, espelhos do GitLab, ferramentas de visualização de código e documentação gerada automaticamente de repos.
Gravando a tela para um GIF de README perfeito
Para uma boa gravação de tela destinada a GIF de README: defina uma janela pequena (800×600 ou 1024×768) para maximizar legibilidade após redimensionamento. Use tema claro se o README usa fundo branco — maior contraste com fundo claro. Limpeza: feche abas e notificações desnecessárias. Demonstração concisa: 3 a 8 segundos que mostram a funcionalidade principal. Velocidade de digitação natural mas deliberada. Após gravar com Loom, OBS ou a gravação nativa do sistema operativo, use o Conversor de Vídeo para GIF para converter o segmento relevante com 10 FPS e 480 px de largura.
Tamanho de ficheiro ideal para GitHub
GitHub tem limite de 10 MB para imagens em READMEs (incluindo GIFs). Para a maioria das demos de CLI ou UI, um GIF de 3 a 5 segundos a 10 FPS e 480 px fica entre 0,5 e 3 MB — bem dentro do limite. Se o GIF exceder 10 MB, reduza a duração, o FPS ou a largura. Para demonstrações mais longas (acima de 10 segundos), considere dividir em dois GIFs: um mostrando a entrada e outro o resultado. Ou use o vídeo do GitHub com a tag HTML de vídeo e poster customizado para o README — aceita até 100 MB em vídeo.
Acessibilidade: alt text para GIFs em documentação
GIFs sem texto alternativo são inacessíveis para utilizadores de leitores de tela. No Markdown do GitHub, adicione sempre texto alternativo descritivo: . O texto alternativo deve descrever o que acontece no GIF, não apenas 'demo' ou 'gif'. Isso beneficia utilizadores com deficiência visual, contextos onde as imagens não carregam (conexões lentas, leitores de RSS) e indexadores de conteúdo que usam alt text para compreensão semântica.
Perguntas frequentes
- Qual configuração usar para GIFs de terminal/CLI?
- Use 10 FPS e 480 px de largura. Para terminais com texto pequeno, considere 640 px para melhor legibilidade. A duração ideal para demos de CLI é 5 a 10 segundos — suficiente para mostrar o comando e o resultado. Use tema de terminal com contraste alto (fundo escuro, texto brilhante) para melhor legibilidade após compressão GIF.
- Posso criar GIFs de animações de interface (UI transitions)?
- Sim. Animações de UI com transições suaves funcionam bem a 15 FPS para capturar a fluidez. Use 480 px de largura. Para interfaces com muito texto ou detalhes finos, use 640 px. Mantenha a demo abaixo de 5 segundos focando apenas na transição principal.
- Como incorporar o GIF no README do GitHub?
- Faça upload do GIF para o repositório (pasta /docs ou /assets) ou crie uma Issue e arraste o GIF para ela (o GitHub hospeda automaticamente). Copie o URL e adicione ao README com sintaxe Markdown: . Para melhor controle de tamanho de exibição, use a tag HTML img com width: <img src='demo.gif' width='600' alt='Demo'>.