Repérer un pixel qui a bougé d’un demi-millimètre, c’est une tâche que tout développeur front-end connaît bien. Capture d’écran, zoom dans un logiciel de graphisme, retour au navigateur, et on recommence des dizaines de fois par heure. Quand on analyse la mise en page de quelqu’un d’autre ou qu’on cherche à comprendre comment le navigateur restitue un élément d’interface précis, l’opération peut prendre plusieurs minutes.

Open Broadcaster Software (OBS) est un outil de streaming gratuit et open source. La plupart des gens le connaissent comme un logiciel pour Twitch et YouTube, mais OBS possède un mode moins évident: celui de loupe numérique en temps réel. Vous pointez la zone de capture sur la partie de l’écran qui vous intéresse, vous l’étirez pour qu’elle remplisse la fenêtre, et chaque pixel devient visible sans avoir à enregistrer de captures ni à passer d’un programme à l’autre.

Vous trouverez ci-dessous un guide pas à pas pour configurer OBS comme inspecteur de pixels, une méthode alternative utilisant la loupe intégrée de Windows, ainsi qu’une discussion honnête sur les cas où cette technique est vraiment nécessaire et ceux où elle est superflue.

💡 Aperçu rapide:

• Installez OBS et ajoutez une source «Capture d’écran»
• Recadrez le cadre sur la zone souhaitée avec Alt + les poignées rouges
• Étirez la zone pour remplir la fenêtre et choisissez la mise à l’échelle «Point»
• Obtenez une loupe en direct sans lissage, les pixels affichés tels quels
• Pour un écran unique, il existe une alternative intégrée: la loupe d’écran de Windows

Étape 1: Installer OBS Studio

Téléchargez OBS Studio depuis le site officiel. Le programme est gratuit et disponible pour Windows, macOS et Linux. L’installation est simple: l’assistant vous guide en quelques clics. Après le lancement, vous verrez une fenêtre de prévisualisation noire et un panneau avec les sources, les scènes et une table de mixage audio.

Les scènes et l’audio ne sont pas nécessaires pour notre objectif. Concentrez-vous entièrement sur le panneau Sources.

Étape 2: Créer une source «Capture d’écran»

Dans le panneau Sources, cliquez sur «+» et sélectionnez Capture d’écran. Donnez un nom quelconque à la source et cliquez sur «OK».

Si vous avez plusieurs moniteurs, parfait: choisissez celui où se trouve votre cible à agrandir. Un seul moniteur fonctionne aussi, vous aurez simplement moins d’espace libre pour positionner OBS.

Étape 3: Recadrer le cadre sur votre cible

C’est l’étape clé. Maintenez la touche Alt enfoncée et faites glisser les poignées rouges qui apparaissent sur les bords de la prévisualisation. Recadrez le cadre de façon à ne capturer que la zone qui vous intéresse: un bouton, une icône, une ligne de texte, la jonction entre deux blocs.

La règle est simple: plus la zone capturée est petite, plus le grossissement final est important. Si vous avez trop recadré, utilisez de nouveau Alt + poignée pour ajuster.

Étape 4: Étirer et mettre à l’échelle

Saisissez maintenant les coins de la prévisualisation (sans appuyer sur aucune touche) et étirez le cadre pour qu’il remplisse toute la fenêtre d’OBS. Ensuite, faites un clic droit sur la zone de prévisualisation et sélectionnez Filtre de mise à l’échelle → Point.

Ce paramètre désactive les algorithmes de lissage. En mode «Point», OBS affiche les pixels tels quels, carré par carré, sans interpolation bilinéaire ni bicubique. Vous voyez exactement ce que le navigateur ou l’application restitue: la couleur de chaque sous-pixel, l’épaisseur des traits, les transitions de dégradé.

Si vous choisissez un autre mode de mise à l’échelle, vous obtiendrez une image floue. Pour l’inspection de pixels, seul le mode «Point» fonctionne.

Étape 5: Travailler avec la loupe

La scène configurée fonctionne en temps réel. Ouvrez un navigateur avec votre mise en page, déplacez la fenêtre, et OBS affiche tous les changements instantanément, sans délai. C’est la différence fondamentale avec l’enchaînement «capture → éditeur → vérification»: vous ne vous interrompez pas et vous ne perdez pas le contexte.

Cette configuration a un inconvénient: vous sacrifiez de l’espace écran. OBS occupe une partie d’un moniteur, voire un moniteur entier. Sur un poste fixe avec deux écrans, ce n’est pas un problème, mais sur un ordinateur portable avec un seul écran, on se sent nettement à l’étroit.

Alternative: la loupe d’écran de Windows

Si OBS vous semble excessif pour une vérification ponctuelle de pixel, Windows dispose d’un outil intégré. Appuyez sur Win + + (la touche plus du pavé numérique ou à côté de Retour arrière) pour lancer la loupe d’écran.

Par défaut, elle affiche une zone agrandie en plein écran. Passez en mode fenêtre ancrée avec Ctrl + Alt + D, et un panneau flottant apparaîtra, que vous pourrez déplacer et redimensionner.

La loupe Windows lisse les pixels par défaut. Ouvrez les paramètres de la loupe (l’icône en forme d’engrenage dans le panneau) et décochez Lisser les bords des images et du texte. L’image devient alors fidèle, sans interpolation.

L’avantage de la loupe Windows: aucune installation nécessaire, elle fonctionne immédiatement. L’inconvénient: moins de flexibilité sur la taille de la zone de visualisation et pas de mode «fenêtre entière = loupe entière» comme dans OBS.

Pourquoi examiner les pixels à la loupe

En pratique, nous utilisons cette technique lors du travail d’intégration et de la revue de design, en particulier quand nous devons vérifier comment le navigateur restitue un élément spécifique. Une icône sur un écran retina n’a pas le même rendu que sur un moniteur standard. Un dégradé peut produire un effet de bandes. Le lissage de texte par sous-pixels diffère entre Windows et macOS. Sans grossissement en direct, ces nuances sont invisibles.

Avec la généralisation des moniteurs haute résolution et la mise à l’échelle d’affichage par défaut dans Windows, la bataille pour des lignes nettes est passée à un niveau supérieur. Ce qui semble parfait en 4K peut se décaler d’un demi-pixel en Full HD avec une mise à l’échelle à 125%.

Dans l’industrie des VFX, il existe le terme «fucking pixel» pour désigner les situations où un artiste s’obsède sur un seul pixel au détriment de l’image globale. L’analogie est juste: la frontière est mince entre le souci du détail et le perfectionnisme. Pixar, lors de SIGGRAPH, a parlé de la diffusion sous-cutanée, une technologie qui donne vie aux personnages animés. La plupart des spectateurs ne remarquent pas la différence. Mais c’est précisément cette différence qui sépare le «bon» de l’«exceptionnel».

La conception web fonctionne de la même manière: un visiteur ne dira pas «ce pixel est mal rendu». Mais la sensation globale de qualité se construit à partir de ces petites choses. La loupe OBS est un moyen rapide de contrôler ces détails.

L’ensemble du processus, de l’installation à la mise à l’échelle, est montré clairement dans cette vidéo:

⁉️🤔 Foire aux questions

OBS rame pendant la mise à l’échelle, que faire?

Vérifiez les paramètres de sortie: Paramètres → Vidéo. Pour l’inspection de pixels, vous n’avez pas besoin de 60 FPS; réglez sur 30, voire 15. Gardez la résolution de la toile de base égale à celle de votre moniteur. Si cela rame sur une carte graphique intégrée, passez le moteur de rendu sur Direct3D 12 dans Paramètres → Avancé → Moteur de rendu vidéo.

Peut-on se passer d’un deuxième écran?

Oui, mais l’espace écran sera serré. Une astuce: réduisez toutes les fenêtres inutiles, laissez le navigateur avec votre mise en page et OBS côte à côte. Sur un portable avec un écran Full HD, on peut raisonnablement placer OBS sur un tiers de la largeur de l’écran, ce qui suffit pour des vérifications ponctuelles. Si cela ne suffit pas, basculez sur la loupe Windows via Win + +.

Existe-t-il un équivalent pour macOS?

OBS fonctionne sur macOS exactement de la même manière, avec la capture d’écran via Capture d’écran ou Capture de fenêtre. La mise à l’échelle «Point» s’appelle Point là aussi (le même filtre dans le menu contextuel de la prévisualisation). La loupe intégrée de macOS est Option + Cmd + 8, mais elle n’offre pas la même flexibilité de recadrage qu’OBS.

Comment vérifier un pixel spécifique dans le code?

Dans les DevTools du navigateur, ouvrez l’inspecteur d’éléments et survolez le nœud qui vous intéresse. Le navigateur le surlignera sur la page. En même temps, regardez la fenêtre OBS; la zone agrandie montrera chaque pixel de la bordure, du padding et de l’arrière-plan. La combinaison OBS + DevTools couvre la grande majorité des tâches d’intégration pixel perfect.

Le lissage des bords du texte diffère selon les navigateurs. OBS m’aidera-t-il à le voir?

Oui, c’est exactement pour cela que cette technique est utile. Ouvrez la même mise en page dans Chrome et Firefox, pointez OBS sur le même bloc de texte, et la différence de rendu par sous-pixels est visible à l’œil nu. C’est particulièrement flagrant avec les polices fines (graisse 300) et le texte clair sur fond sombre.

Ce qu’apporte une loupe à pixels en pratique

Cette technique n’est pas destinée à toutes les maquettes. Pour une landing page de cinq blocs, les DevTools suffisent. Mais si vous construisez un design system, que vous déboguez des micro-animations ou que vous peaufinez une interface que des milliers d’utilisateurs verront, 10 minutes avec la loupe OBS vous feront gagner des heures de discussion avec un designer sur «pourquoi ça ne rend pas bien».

Commencez simplement: ouvrez votre projet actuel, capturez une section avec une icône et du texte, activez la mise à l’échelle «Point». Si ce que vous voyez vous satisfait, parfait. Sinon, vous venez de trouver quelque chose que vous pouvez corriger en cinq minutes.

Quel outil utilisez-vous pour vérifier les pixels lors de l’intégration: une loupe, des captures d’écran, ou faites-vous confiance à l’inspecteur du navigateur? Dites-le-nous dans les commentaires.