Redimensionar imagens para arquivos README do GitHub
As imagens nos arquivos README do GitHub devem ser dimensionadas para o contêiner de redução (normalmente de 700 a 900 pixels de largura) e otimizadas para carregamento rápido. Imagens superdimensionadas retardam a renderização da página e desperdiçam largura de banda para cada visitante. ImageGates redimensiona suas capturas de tela e diagramas para dimensões ideais para GitHub.
Tamanhos de imagem para arquivos README do GitHub
O GitHub renderiza o conteúdo README em uma coluna com cerca de 900 px de largura no desktop e reduz as imagens para caber. Qualquer coisa mais ampla é reduzida pelo navegador, e as capturas de tela do código são as que mais sofrem com essa reamostragem.
Especificações exatas:
- Maximum useful width: 900 px (coluna LEIA-ME)
- Retina-crisp screenshots: 1800 px de largura, exibido em 900
- Social preview card: 1280×640 px (2:1)
- Per-file upload ceiling: 10 MB via arrastar e soltar
- Formatos: PNG para UI e código, SVG para diagramas, GIF para demonstrações
O que causa um resultado rejeitado ou degradado:
- Enviar capturas de tela de 4 MB para o repositório, que cada clone baixa.
- Usando JPG para capturas de tela de terminal ou código – as bordas do texto ficam manchadas.
- Codificar uma largura em HTML que quebra o layout móvel em vez de usar um arquivo redimensionado.
Ordem de preparo que evita retrabalho:
- Capture em 2× e redimensione o lado mais longo para 1800 px.
- Exporte PNG para interfaces, SVG para diagramas de arquitetura.
- Comprimir antes de confirmar; uma captura de tela de 200 KB normalmente é indistinguível de uma de 2 MB.
How to use this tool
- Carregar imagem — Select your screenshot, diagram, or banner for the README.
- Redimensionar para 800-1200px — Resize to fit GitHub's markdown container width.
- Adicionar ao README — Download and reference in your README.md file.
Guide
Imagens bem dimensionadas nos READMEs do GitHub melhoram a documentação do projeto e a experiência do usuário. Cada visitante do seu repositório carrega essas imagens, portanto a otimização é importante.
Práticas recomendadas para imagens do GitHub: - Resize to 800-1200px wide (matches container) - Use PNG para capturas de tela com texto - Use JPG para conteúdo fotográfico - Use SVG para diagramas e logotipos - Mantenha o peso total da imagem abaixo de 5 MB por README - Use a hospedagem de imagens do GitHub (arraste e solte nos problemas)
Tipos de imagem README: 1. Project logo/banner (top of README) 2. Screenshots of the application 3. Architecture diagrams 4. Demo GIFs (keep under 5MB) 5. Badge images (auto-generated, no optimization needed)
Perguntas frequentes
Qual largura de imagem devo usar para READMEs do GitHub?
O contêiner de redução do GitHub tem cerca de 888px de largura. Faça upload de imagens com largura de 800-1200px para uma exibição nítida. Imagens maiores são dimensionadas automaticamente e desperdiçam largura de banda.
Qual formato é melhor para imagens do GitHub?
PNG para capturas de tela e diagramas (texto nítido). JPG para fotografias. SVG para logotipos e gráficos simples. GIF para demonstrações curtas.
Abra o redimensionador de imagem