Упіймати піксель, який з’їхав на пів міліметра,, задача, знайома кожному верстальнику. Скриншот, зум у графічному редакторі, назад у браузер, і так десятки разів за годину. А якщо аналізуєш чужу верстку чи розбираєшся, як браузер рендерить конкретний 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 показує всі зміни миттєво, без затримки. Це принципова відмінність від ланцюжка «скриншот → редактор → перевірка»: ви не перериваєтеся й не втрачаєте контекст.

У цього підходу є один мінус: ви жертвуєте екранним простором. 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 зекономлять години суперечок із дизайнером про те, «чому воно виглядає не так».

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

А яким інструментом ви перевіряєте пікселі при верстці, лупою, скриншотами чи довіряєте інспектору браузера? Напишіть у коментарях.