Redimensionner les images pour les fichiers README GitHub
Les images des fichiers README GitHub doivent être dimensionnées pour le conteneur de démarques (généralement entre 700 et 900 px de large) et optimisées pour un chargement rapide. Les images surdimensionnées ralentissent le rendu des pages et gaspillent de la bande passante pour chaque visiteur. ImageGates redimensionne vos captures d'écran et diagrammes aux dimensions optimales pour GitHub.
Tailles d'image pour les fichiers README GitHub
GitHub affiche le contenu README dans une colonne d'environ 900 px de large sur le bureau et réduit les images pour les adapter. Tout ce qui est plus large est réduit par le navigateur, et les captures d'écran du code souffrent le plus de ce rééchantillonnage.
Spécifications exactes :
- Maximum useful width: 900 px (colonne README)
- Retina-crisp screenshots: 1800 px de large, affiché à 900
- Social preview card: 1280×640 px (2:1)
- Per-file upload ceiling: 10 Mo par glisser-déposer
- Formats : PNG pour l'interface utilisateur et le code, SVG pour les diagrammes, GIF pour les démos
Qu’est-ce qui cause un résultat rejeté ou dégradé :
- Envoi de captures d'écran de 4 Mo dans le référentiel, que chaque clone télécharge ensuite.
- Utilisation de JPG pour les captures d'écran de terminal ou de code : les bords du texte deviennent tachés.
- Codage en dur d'une largeur en HTML qui casse la mise en page mobile au lieu d'utiliser un fichier redimensionné.
Ordre de préparation qui évite les retouches :
- Capturez à 2 × et redimensionnez le côté le plus long à 1800 px.
- Exportez PNG pour les interfaces, SVG pour les diagrammes d’architecture.
- Compresser avant de s'engager ; une capture d'écran de 200 Ko est normalement impossible à distinguer d'une capture d'écran de 2 Mo.
How to use this tool
- Télécharger une image — Select your screenshot, diagram, or banner for the README.
- Redimensionner à 800-1200px — Resize to fit GitHub's markdown container width.
- Ajouter au README — Download and reference in your README.md file.
Guide
Les images de bonne taille dans les README GitHub améliorent la documentation du projet et l'expérience utilisateur. Chaque visiteur de votre référentiel charge ces images, l'optimisation est donc importante.
Bonnes pratiques en matière d’images GitHub : - Resize to 800-1200px wide (matches container) - Utilisez PNG pour les captures d'écran avec du texte - Utilisez JPG pour le contenu photographique - Utilisez SVG pour les diagrammes et les logos - Gardez le poids total de l’image inférieur à 5 Mo par README - Utiliser l'hébergement d'images de GitHub (glisser-déposer dans les tickets)
Types d'images 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)
Questions fréquentes
Quelle largeur d’image dois-je utiliser pour les README GitHub ?
Le conteneur de démarques de GitHub mesure environ 888 px de large. Téléchargez des images d'une largeur de 800 à 1 200 px pour un affichage net. Les images plus grandes sont automatiquement mises à l’échelle et gaspillent de la bande passante.
Quel format est le meilleur pour les images GitHub ?
PNG pour les captures d’écran et les diagrammes (texte net). JPG pour les photographies. SVG pour les logos et les graphiques simples. GIF pour de courtes démos.
Ouvrir le redimensionneur d'image