Порівняння зображень
Завантажте два зображення та отримайте попіксельно точний візуальний диф між ними, із перцептивним порівнянням YIQ та виділенням з урахуванням згладжування — на 100% локально у вашому браузері.
🔒 Обробляється повністю у вашому браузері — те, що ви тут вводите, ніколи не вивантажується.
Результат
Внесли зміни в CSS і хочете точно знати, що зрушилося? Порівнюєте два скріншоти для QA-перевірки візуальної регресії? Цікавитесь, що насправді змінилося між двома експортованими версіями одного фото? Гортати туди-сюди між двома зображеннями та вдивлятися в пошуках відмінностей — це повільно та ненадійно. Цей інструмент накладає обидва зображення і показує всі змінені пікселі на одній картинці.
Порівняння базується на справжній математиці піксельної різниці, з тієї ж родини алгоритмів, що використовуються в інструментах на кшталт pixelmatch: кожен піксель обох зображень перетворюється з RGB у колірний простір YIQ (Y = яскравість, I та Q = осі кольоровості NTSC), після чого обчислюється евклідова відстань між двома точками YIQ. Ця відстань порівнюється з порогом, встановленим повзунком чутливості — підвищте чутливість, щоб виявити ледь помітні зсуви кольору, або знизьте її, щоб ігнорувати шум стиснення та зважати лише на очевидні зміни.
Наївне попіксельне порівняння позначило б кожен згладжений край як «відмінний», навіть якщо нічого суттєвого не змінилося, оскільки згладжування зсуває кілька граничних пікселів на кілька відтінків. Цей інструмент застосовує справжню евристику згладжування до обох зображень: піксель вважається справжньою відмінністю лише тоді, коли він НЕ знаходиться всередині градієнта згладжування. Конкретніше — якщо його околиця 3×3 в жодному з вихідних зображень не містить одночасно і світлішого, і темнішого пікселя, ніж він сам, що є характерною ознакою згладженого краю, а не фактичного вмісту.
Завантажте Зображення A та Зображення B, за потреби відрегулюйте чутливість і натисніть «Виконати». Ви отримаєте точний відсоток пікселів, що відрізняються, а також зображення дифу, де кожна справжня зміна виділена яскравим пурпуровим кольором на затемненій версії оригіналу — завантажте його та одразу прикріпіть до звіту про помилку або нотаток QA. Обидва зображення повинні мати однакові розміри; якщо це не так, інструмент прямо повідомить вас про це, замість того, щоб мовчки обрізати чи розтягувати одне з них. Жодні дані не залишають ваш браузер на жодному етапі.