Capture d'écran haute résolution d'une page web : comment faire

Pour faire une capture d’écran haute résolution, capturez à la pleine résolution de votre écran, enregistrez en PNG plutôt qu’en JPG et zoomez avant de capturer les petits détails. Pour une page web plus nette que ce que votre écran peut afficher, ouvrez les DevTools de Chrome, réglez un rapport de pixels de l’appareil (DPR) plus élevé, par exemple 2 ou 3, et utilisez Capture full size screenshot : l’image est rendue à ce multiple de la taille normale.

Pourquoi les captures d’écran sont floues

Une capture d’écran copie les pixels de votre écran, rien de plus. Si la fenêtre est petite, si la page est dézoomée ou si le fichier est enregistré en JPG compressé, des détails se perdent. Agrandir l’image ensuite ne les fait pas revenir.

Les façons de faire une capture d’écran haute résolution

Méthode	Ce qu’elle change	Idéale pour
Enregistrer en PNG	Pas d’artefacts de compression sur le texte et les bords	Interfaces, texte, schémas
Zoomer avant de capturer	Plus de pixels d’écran pour la zone voulue	Un graphique ou un tableau
DevTools de Chrome avec un DPR plus élevé	Rend la page en 2x ou 3x	Pages web pour l’impression, les diapositives ou les écrans Retina

Option 1 : PNG, pas JPG

Le PNG garde le texte et les bords d’interface nets ; le JPG compresse l’image et peut rendre les lignes fines floues. N’utilisez le JPG que si la taille du fichier compte plus que les détails.

Option 2 : zoomer d’abord

Appuyez sur Ctrl + + (Cmd + + sur Mac) pour zoomer la page, puis capturez la zone. Le même graphique couvre maintenant plus de pixels d’écran : il reste net à l’impression ou en projection.

Option 3 : le rapport de pixels dans les DevTools de Chrome

La documentation du mode Appareil de Chrome explique que le DPR est « le rapport entre les pixels physiques de l’écran et les pixels logiques (CSS) ». Vous pouvez le régler vous-même :

1. Ouvrez les DevTools (F12, ou Cmd + Option + I sur Mac) et activez le mode Appareil avec l’icône téléphone et tablette.
2. Cliquez sur More options (trois points) > Add device pixel ratio.
3. Dans la barre au-dessus de la page, choisissez une valeur dans le nouveau menu DPR, par exemple 2 ou 3.
4. Dans le même menu More options, choisissez Capture screenshot pour la partie visible ou Capture full size screenshot pour toute la page.

Le DPR agit comme un multiplicateur de résolution : une vue de 1920 pixels de large avec un DPR de 2 donne une image de 3840 pixels de large, comme le montre ce guide pas à pas. Le même guide prévient que les captures en pleine taille ne marchent pas parfaitement sur tous les sites. Les autres commandes de capture des DevTools sont listées dans les raccourcis de capture d’écran dans Chrome, et la marche à suivre complète est dans la capture d’écran de page entière dans Chrome.

Pour les captures de tous les jours, Full page screenshot enregistre des pages entières ou des zones sélectionnées en PNG, le format qui garde le texte net. Pour des images 2x ou 3x, utilisez la méthode DevTools ci-dessus.

Questions fréquentes

Comment faire une capture d’écran haute résolution sous Windows ?

Réglez l’affichage sur sa résolution recommandée, agrandissez la fenêtre, zoomez sur la zone et capturez avec Windows + Maj + S. Pour les pages web, utilisez la méthode DPR des DevTools.

Une capture peut-elle avoir une résolution plus élevée que mon écran ?

Pas avec les raccourcis système. Les DevTools de Chrome peuvent rendre une page web en 2x ou 3x avec un DPR personnalisé.

PNG ou JPG pour les captures d’écran ?

PNG pour le texte et les interfaces, JPG quand il faut un fichier plus léger et que les détails fins comptent moins.