Guide pratique
Créer une grille de captures pour votre README GitHub
Un README GitHub avec une grille de captures percutante communique instantanément à quoi ressemble votre projet, ce qu'il fait et pourquoi il vaut la peine d'être cloné — dans les 5 secondes qu'un développeur consacre à évaluer un nouveau dépôt.
Essayer MergeFrame — GratuitLes étoiles, forks et contributions commencent tous par une première impression. Un README GitHub qui s'ouvre avec une grille de captures de qualité surperforme considérablement les READMEs texte seul pour attirer contributeurs et utilisateurs.
Les dispositions de grille les plus efficaces pour un README : (1) mode clair + mode sombre côte à côte (1×2) — montre immédiatement le support des thèmes, (2) 3 écrans clés de votre application (1×3) — page d'accueil, page de fonctionnalité, paramètres, (3) grille de mise en valeur des fonctionnalités (2×2) — chaque cellule montre une fonctionnalité distincte avec une légende.
Pour les projets open source, montrer votre projet dans plusieurs contextes (bureau, tablette, mobile dans une grille responsive) signale une implémentation de qualité professionnelle et attire la confiance des contributeurs seniors.
GitHub Markdown supporte l'intégration d'images standard avec la syntaxe ``. Uploadez votre PNG grille dans le dépôt lui-même (sous `/docs/` ou `/assets/`) et référencez-le avec un chemin relatif. Cela garantit que l'image est toujours disponible et versionnée avec le dépôt.
Comment faire — Étape par étape
- 1
Définissez la narration de votre grille
Choisissez 2 à 4 vues clés : paire mode sombre/clair, écrans clés de l'app, ou mise en valeur des fonctionnalités. Chaque cellule doit répondre à 'à quoi ressemble ce projet ?'
- 2
Capturez des screenshots cohérents
Même taille de fenêtre (ex. 1280×800), même facteur d'échelle. Pour les apps mobiles, utilisez un émulateur de cadre d'appareil ou le mode appareil des DevTools navigateur.
- 3
Ouvrez MergeFrame et construisez votre grille
Accédez à mergeframe.com. Sélectionnez votre disposition et déposez vos captures.
- 4
Exportez à 1920px de largeur
Un export large garantit que la grille reste nette même quand GitHub compresse les images dans le rendu README.
- 5
Commitez et référencez dans le README
Ajoutez le PNG dans /docs/screenshots/ de votre dépôt et intégrez-le en haut de votre README avec un texte alternatif approprié.
Prêt à fusionner vos images ?
100% navigateur. Sans compte. Sans upload. Gratuit.
Questions fréquentes
Dois-je utiliser GIF ou PNG pour les captures README GitHub ?
PNG pour les vues statiques — plus net et plus léger que le GIF pour le contenu non animé. Utilisez le GIF uniquement pour les démonstrations interactives. Pour les animations complexes, envisagez WebP — les READMEs GitHub le supportent.
Où doit apparaître la grille de captures dans le README ?
Immédiatement après la description de votre projet et les badges, avant les instructions d'installation. La grille est votre accroche visuelle — placez-la là où le regard du lecteur se pose naturellement en premier.
Quelle largeur pour les images dans un README GitHub ?
GitHub plafonne la largeur d'image à la largeur de la colonne README (~820px). Exportez à 1640px et GitHub l'affichera net à 820px de largeur effective sur les écrans haute résolution.
MergeFrame — Combinez des images en grille. Gratuit. Sans compte. Navigateur uniquement.
Essayer MergeFrame Gratuitement →