Порівняння зображень (Diff)

Внесли правку в CSS і хочете знати, що саме змістилося? Порівнюєте два скриншоти для QA-перевірки візуальних регресій? Гадаєте, що саме змінилося між двома збереженими версіями того самого фото? Гортати два зображення туди-сюди й вишукувати відмінності оком — повільно і ненадійно: цей інструмент накладає одне зображення на інше й показує кожен змінений піксель одразу.

Порівняння побудоване на реальній математиці попіксельного diff — тій самій ідеї, що лежить в основі інструментів на кшталт pixelmatch: кожен піксель обох зображень переводиться з RGB у колірний простір YIQ (Y — яскравість, I та Q — координати кольоровості NTSC), і обчислюється евклідова відстань між двома точками YIQ. Цю відстань порівнюють із порогом, який задає повзунок чутливості: підвищте чутливість, щоб ловити тонкі зміни кольору, або знизьте її, щоб ігнорувати шум стиснення і бачити лише очевидні зміни.

Наївне попіксельне порівняння підсвітило б кожен згладжений край як «відмінність», хоча насправді нічого суттєвого не змінилося — адже згладжування трохи зсуває кілька прикордонних пікселів на кілька відтінків. Цей інструмент застосовує реальну евристику виявлення антиаліасингу до обох зображень: піксель вважається справжньою відмінністю, лише якщо він НЕ лежить всередині градієнта згладжування — конкретно, якщо його власне сусіднє поле 3x3 в жодному з вихідних зображень не містить одночасно світлішого й темнішого за нього пікселя, що є ознакою саме згладженого краю, а не реального вмісту.

Завантажте зображення A та зображення B, за потреби налаштуйте чутливість і натисніть «Виконати». Ви отримаєте точний відсоток пікселів, що відрізняються, і diff-зображення, де кожна справжня зміна підсвічена яскраво-пурпуровим кольором поверх затемненої версії оригіналу — завантажте його й додайте прямо до звіту про баг чи нотаток QA. Обидва зображення мають мати однакові розміри; якщо ні, інструмент прямо про це повідомить, а не обріже чи розтягне одне з них мовчки. Жодні дані не покидають ваш браузер.