Comment prendre des captures d’écran en ultra haute résolution dans Chrome (4K, 8K, …)

Une capture d’écran de mon site Web en résolution 8K (ouverte dans un visualiseur d’images)

En tant qu’éditeur, créateur de vidéos ou développeur web, vous pouvez avoir besoin de captures d’écran d’un site web, qui ont une résolution plus élevée que votre moniteur physique. Par exemple, si vous avez un moniteur 1920 x 1080 (full HD), mais que vous voulez que vos captures d’écran soient en 4K (3840 x 2160) ou même 8K (7680 x 4320).

Avec les méthodes traditionnelles de capture d’écran comme Snipping Tool cependant, vous ne pouvez prendre que des captures d’écran qui ont la même résolution que votre moniteur. Mais Google Chrome lui-même a en fait une fonctionnalité intégrée pour capturer des captures d’écran de plus haute résolution. Dans le tutoriel suivant, je vais vous montrer comment l’utiliser :

Instructions

Les étapes 3, 4 et 5 ne doivent être effectuées qu’une seule fois. Pour la deuxième fois, le processus sera beaucoup plus court.

Etape 1:
Ouvrez le site web que vous voulez faire une capture d’écran dans un onglet Chrome et appuyez sur F12 sur votre clavier. Cela ouvrira les outils du développeur. Tout le code et les trucs qui apparaissent peuvent vous sembler intimidants si vous n’êtes pas familier avec le développement web, mais ne vous inquiétez pas. Nous ne nous en mêlerons pas et vous ne pourrez rien casser.

Outils du développeur dans Google Chrome

Étape 2 :
Cliquez sur l’icône « Toggle device bar » dans le coin supérieur gauche du volet des développeurs.

Comment ouvrir la barre d'outils pour appareils dans Google Chrome

L’affichage qui apparaît maintenant est un mode qui aide les développeurs Web à tester leurs sites Web sur différentes tailles d’écran. La taille d’écran par défaut est « Responsive » mais vous pouvez également choisir d’autres types d’écran dans le menu déroulant.

L'aperçu de l'appareil des outils de développement de Google Chrome

Étape 3:
Pourtant, nous n’utiliserons aucun des préréglages mais créerons plutôt notre propre type d’écran. Ouvrez le menu déroulant du type d’écran et sélectionnez « Modifier… ».

Menu déroulant de l'appareil dans les outils de développement de Google Chrome.

Etape 4:
Une nouvelle barre latérale apparaîtra, qui répertorie plusieurs modèles de téléphones pouvant être utilisés comme types d’écran. Nous pouvons toutefois les ignorer et cliquer plutôt sur le bouton « Ajouter un appareil personnalisé… ».

Ajouter un périphérique personnalisé dans les outils de développement de Google Chrome

Étape 5:
Maintenant, remplissez les détails pour le nouveau périphérique d’écran. Choisissez un nom comme « HighRes Screenshot » et choisissez 1920 x 1080 comme résolution d’écran. Ne vous inquiétez pas, cela ne sera pas la résolution de nos captures d’écran mais détermine uniquement la taille du texte et des éléments sur le site web. Les captures d’écran auront une résolution beaucoup plus élevée.
Vient maintenant la partie importante : Le choix d’un ratio de pixels de l’appareil (DPR). Le DPR détermine la résolution de nos captures d’écran de la manière suivante :
La largeur de la capture d’écran = 1920 * DPR
La hauteur de la capture d’écran = 1080 * DPR
Le DPR agit donc comme un multiplicateur de résolution. Lorsque nous choisissons le DPR pour être 4,0 par exemple, la résolution de la capture d’écran sera :
Largeur : 1920 * 4 = 7680 pixels
Hauteur : 1080 * 4 = 4320 pixels
ce qui est la résolution de 8K. Enfin, changez le type de périphérique de « Mobile » à « Desktop » et cliquez sur le bouton « Ajouter » pour créer votre périphérique d’écran.

Comment configurer un périphérique personnalisé dans les outils de développement de Google Chrome

Étape 6:
Sélectionnez maintenant votre nouveau périphérique dans le menu déroulant du type d’écran. Cela rendra le site web avec les propriétés de l’appareil.

Sélectionner le périphérique personnalisé nouvellement créé pour l'aperçu dans les outils de développement de Google Chrome

Étape 7 :
Pour faire la capture d’écran, cliquez sur les trois points en haut à droite et sélectionnez « Capture d’écran ».

Capturer une capture d'écran haute résolution à l'aide des outils pour développeurs de Google Chrome

Selon votre machine, il faudra plusieurs secondes à Chrome pour rendre la capture d’écran. Lorsque tout est terminé, la capture d’écran sera enregistrée dans votre dossier de téléchargement.

La capture d'écran en cours de téléchargement.

C’est tout!

Vous venez de créer une capture d’écran 8K d’un site web. Vérifiez les propriétés de l’image si vous ne me croyez pas. Ou téléchargez la capture d’écran ici.

Propriétés de l'image de la capture d'écran haute résolution, que je viens de prendre

Le dispositif d’écran que vous avez créé, sera stocké dans votre navigateur et vous n’aurez pas besoin de le recréer à chaque fois. La prochaine fois que vous voudrez faire une capture d’écran en haute résolution, il vous suffira d’appuyer sur F12, de cliquer sur l’icône « Basculer la barre de périphériques », de sélectionner votre périphérique de capture d’écran et d’appuyer sur « Capture d’écran ». C’est une question de 10 secondes !

Bonus

Si vous sélectionnez plutôt « Capture d’écran pleine taille » dans le menu, une capture d’écran de l’ensemble du site Web (de l’en-tête au pied de page) sera créée. C’est utile, lorsque vous souhaitez archiver l’aspect d’un site Web à un moment donné.

Il s’agit d’une capture d’écran complète.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *