Поймать пиксель, который съехал на полмиллиметра, задача, знакомая каждому верстальщику. Скриншот, зум в графическом редакторе, обратно в браузер, и так десятки раз за час. А если анализируешь чужую верстку или разбираешься, как браузер рендерит конкретный UI-элемент, процесс растягивается на минуты.

Open Broadcaster Software (OBS), бесплатный стриминговый инструмент с открытым исходным кодом. Большинство знает его как софт для Twitch и YouTube, но у OBS есть неочевидный режим: цифровая лупа в реальном времени. Вы наводите область захвата на нужный фрагмент экрана, растягиваете на все окно, и каждый пиксель виден без сохранения скриншотов и без переключения между программами.

Ниже, пошаговая настройка OBS в режим инспектора пикселей, альтернативный способ через встроенную лупу Windows и честный разговор о том, когда эта техника действительно нужна, а когда, перебор.

💡 Быстрый обзор:

• Устанавливаете OBS и добавляете источник «Захват экрана»
• Обрезаете кадр до нужного фрагмента через Alt + красные ручки
• Растягиваете область на все окно и выбираете масштабирование «Точка»
• Получаете живую лупу без сглаживания, пиксели видны как есть
• Для одиночного монитора есть встроенная альтернатива, экранная лупа Windows

Шаг 1: Установка OBS Studio

Скачайте OBS Studio с официального сайта, программа бесплатна и доступна для Windows, macOS и Linux. Установка стандартная: мастер проведет за пару кликов. После запуска вы увидите черное окно превью и панель с источниками, сценами и микшером аудио.

Сцены и аудио для нашей задачи не нужны. Весь фокус, на панели Источники.

Шаг 2: Создание источника «Захват экрана»

В панели Источники нажмите «+» и выберите Захват экрана (в английской версии, Display Capture). Дайте источнику любое имя и нажмите «ОК».

Если у вас несколько мониторов, отлично: выберите тот, на котором находится цель для увеличения. Один монитор, тоже работает, просто свободного пространства для размещения OBS будет меньше.

Шаг 3: Обрезка кадра до цели

Это ключевой шаг. Зажмите Alt и потяните за красные ручки, появившиеся по краям превью. Обрежьте кадр так, чтобы в него попадал только интересующий фрагмент экрана: кнопка, иконка, строка текста, стык двух блоков.

Правило простое: чем меньше область захвата, тем сильнее итоговое увеличение. Если обрезали лишнее, снова Alt + ручка для коррекции.

Шаг 4: Растягивание и масштабирование

Теперь возьмитесь за углы превью (без зажатых клавиш) и растяните рамку на все доступное окно OBS. После этого кликните правой кнопкой мыши по области превью, выберите Масштабирование → Точка (в английской версии, Scale Filtering → Point).

Именно этот пункт отключает алгоритмы сглаживания. В режиме «Точка» OBS показывает пиксели как есть, квадрат за квадратом, без билинейной или бикубической интерполяции. Вы видите ровно то, что рендерит браузер или приложение: цвет каждого субпикселя, толщину линий, стыки градиентов.

Если выбрать любой другой режим масштабирования, получите размытую картинку. Для инспекции пикселей только «Точка».

Шаг 5: Работа с лупой

Настроенная сцена работает в реальном времени. Откройте браузер с версткой, перемещайте окно, OBS показывает все изменения мгновенно, без задержки. Это принципиальное отличие от цепочки «скриншот → редактор → проверка»: вы не прерываетесь и не теряете контекст.

У setup есть один минус: вы жертвуете экранным пространством. OBS занимает часть монитора или целый монитор. На десктопе с двумя дисплеями это не проблема, но на ноутбуке с одним экраном ощутимо тесновато.

Альтернатива: экранная лупа Windows

Если OBS для разовой проверки пикселей кажется избыточным, в Windows есть встроенный инструмент. Нажмите Win + + (клавиша плюс на цифровом блоке или рядом с Backspace), запустится экранная лупа.

По умолчанию она показывает увеличенный фрагмент в полноэкранном режиме. Переключитесь на закрепленное окно: Ctrl + Alt + D, появится плавающая панель, которую можно двигать и растягивать.

Лупа Windows по умолчанию сглаживает пиксели. Откройте настройки лупы (шестеренка в панели) и снимите флажок Сглаживать края изображений и текста. После этого картинка станет честной, без интерполяции.

Плюс Windows-лупы: не требует установки, работает сразу. Минус: меньшая гибкость в размере области обзора и отсутствие режима «все окно = вся лупа» как в OBS.

Зачем рассматривать пиксели под лупой

На практике мы используем эту технику при верстке и ревью дизайна, особенно когда нужно проверить, как браузер отрисовывает конкретный элемент. Иконка на retina выглядит иначе, чем на обычном мониторе. Градиент может дать banding. Субпиксельное сглаживание текста отличается между Windows и macOS. Без живого увеличения эти нюансы не видны.

С распространением мониторов высокого разрешения и масштабирования дисплея по умолчанию в Windows битва за четкие линии перешла на новый уровень. То, что на 4K выглядит идеально, на Full HD при 125% масштабировании может поехать на полпикселя.

В VFX-индустрии есть термин «fucking pixel», для ситуаций, когда художник зацикливается на отдельном пикселе в ущерб общей картине. Аналогия уместна: между вниманием к деталям и перфекционизмом тонкая грань. Авторы Pixar на SIGGRAPH рассказывали о subsurface scattering, технологии, вдыхающей жизнь в анимированных персонажей. Большинство зрителей не замечает разницы. Но именно эта разница отделяет «хорошо» от «выдающегося».

С веб-дизайном та же история: посетитель не скажет «тут пиксель не так отрендерился». Но общее ощущение качества складывается из таких мелочей. Лупа OBS, быстрый способ эти мелочи контролировать.

Наглядно весь процесс от установки до масштабирования показан в этом видео:

⁉️🤔 Частые вопросы

OBS тормозит при масштабировании, что делать?

Проверьте настройки вывода: Settings → Video. Для задачи инспекции пикселей не нужно 60 FPS, поставьте 30 или даже 15. Разрешение базового холста держите равным разрешению монитора. Если тормозит на встроенной графике, переключите рендерер на Direct3D 12 в Settings → Advanced → Video Renderer.

Можно ли обойтись без второго монитора?

Да, но экранного места будет мало. Лайфхак: сверните все лишние окна, оставьте браузер с версткой и OBS рядом. На ноутбуке с Full HD-экраном реально разместить OBS шириной в треть экрана, для точечной проверки хватает. Если не хватает, переключитесь на Windows-лупу через Win + +.

Есть ли аналог для macOS?

OBS работает на macOS точно так же, захват экрана через Display Capture или Window Capture. Масштабирование «Точка» там называется Point (тот же самый фильтр в контекстном меню превью). Встроенная лупа macOS, Option + Cmd + 8, но она не дает той же гибкости обрезки, что OBS.

Как проверить конкретный пиксель в коде?

В DevTools браузера откройте инспектор элементов, наведите на интересующий узел, браузер подсветит его на странице. Одновременно смотрите в окно OBS, увеличенная область покажет каждый пиксель границы, отступа и фона. Связка OBS + DevTools закрывает подавляющее большинство задач пиксельной верстки.

Сглаживание краев текста отличается между браузерами, OBS поможет это увидеть?

Да, именно для этого техника и полезна. Откройте одну верстку в Chrome и в Firefox, наведите OBS на один и тот же текстовый блок, разница в субпиксельном рендеринге видна невооруженным глазом. Особенно заметно на тонких шрифтах (300 weight) и светлом тексте на темном фоне.

Что дает пиксельная лупа на практике

Техника не для каждого макета. Лендинг из пяти блоков, достаточно DevTools. Но если вы верстаете дизайн-систему, отлаживаете микроанимации или доводите до ума интерфейс, который увидят тысячи пользователей, 10 минут с лупой OBS сэкономят часы споров с дизайнером о том, «почему оно выглядит не так».

Начните с малого: откройте свой текущий проект, захватите фрагмент с иконкой и текстом, включите масштабирование «Точка». Если увиденное вас устраивает, отлично. Если нет, вы только что нашли то, что поправить за пять минут.

А каким инструментом вы проверяете пиксели при верстке, лупой, скриншотами или доверяете инспектору браузера? Напишите в комментариях.