Сравнение скриншотов: pixel diff, pHash и SSIM простым языком

Сравнение скриншотов — это алгоритмический процесс, при котором инструмент визуального тестирования определяет, идентичны ли две фотографии одной веб-страницы или различны, и если различны — то насколько и где.

За каждым инструментом визуального тестирования стоит один или несколько алгоритмов сравнения изображений. Три метода доминируют на рынке. У каждого своя философия, и понимание этих различий поможет выбрать правильный инструмент — или понять, почему текущий даёт фрустрирующие результаты.

Pixel Diff: считать точки

Pixel diff — самый прямой подход. Алгоритм берёт два изображения одинакового размера, проходит каждый пиксель и сравнивает значения цвета (красный, зелёный, синий, прозрачность). Если значения различаются, пиксель помечается как «другой».

Представьте две одинаковые миллиметровки, кроме того, что кто-то закрасил 3 клетки красным на второй. Pixel diff нашёл бы именно эти 3 клетки.

Алгоритм производит две вещи: количество (или процент) различных пикселей и «diff»-изображение, где зоны различий выделены красным.

Это просто, быстро, детерминированно. Но грубо. Лёгкое изменение anti-aliasing в тексте — невидимое глазу — может пометить сотни пикселей как «разные». Тест проваливается зря. Чтобы понять ограничения pixel diff, обратитесь к нашей статье попиксельное vs перцептуальное сравнение и нашему гайду по снижению ложных срабатываний.

pHash: визуальная подпись

pHash (Perceptual Hash) использует радикально другой подход. Вместо попиксельного сравнения он сводит каждое изображение к короткому «отпечатку» — обычно 64 бит — захватывающему глобальную визуальную структуру.

Думайте об этом как о мелодии песни. Вы можете узнать «Подмосковные вечера», даже если их играют на пианино, на гитаре или поют не очень. Мелодия та же — детали меняются. pHash так же работает с изображениями.

Алгоритм уменьшает изображение до очень малого размера (например 32x32 пикселя), конвертирует в градации серого, применяет математическое преобразование, извлекающее низкие частоты (глобальную структуру), и производит последовательность битов.

Два визуально похожих изображения будут иметь близкие отпечатки. «Расстояние» между отпечатками (число различающихся битов, расстояние Хэмминга) измеряет похожесть.

Преимущество: невосприимчив к микровариациям (anti-aliasing, лёгкое сжатие, изменение размера). Проблема: малая точность в деталях. Тонкое изменение цвета или сдвиг в 5 пикселей могут остаться незамеченными, если глобальная структура остаётся похожей.

SSIM: математический глаз

SSIM (Structural Similarity Index Measure) — самый изощрённый из трёх методов. Он не сравнивает пиксели индивидуально и не изображение целиком — он сравнивает зоны изображения по трём перцептуальным критериям.

Яркость: одинаково ли освещены зоны? Контраст: похожи ли вариации яркости? Структура: одинаково ли расположены паттерны пикселей?

Алгоритм проходит изображение скользящим окном и вычисляет эти три меры для каждой зоны. Результат — оценка от 0 до 1 — чем ближе к 1, тем перцептуально похожее изображения.

Оценка SSIM 0,99 означает «практически идентично для человека». Оценка 0,95 — «видимые, но незначительные различия». Ниже 0,90 различия очевидны.

Преимущество: метод ближе всего к человеческому восприятию. Терпит вариации рендеринга, не маскируя реальные изменения. Проблема: медленнее pixel diff, и порог толерантности нужно тщательно калибровать.

Что каждый метод упускает

Pixel diff упускает контекст. Он не знает, важен ли разный пиксель. Изменение anti-aliasing и исчезающая кнопка генерируют один тип алерта.

pHash упускает детали. Его сила (общий вид) — также его слабость. Тонкие изменения — слегка увеличенный шрифт, отступ изменённый на 2px — проходят мимо радара.

SSIM — лучший компромисс, но требует тонкой калибровки порога. Слишком строгий — ведёт себя как pixel diff. Слишком мягкий — пропускает регрессии.

Структурный подход: за пределами изображения

Существует четвёртый подход, не сравнивающий изображения вообще. Структурный анализ напрямую сравнивает вычисленные CSS-свойства и DOM. Это то, что делает Delta-QA своим алгоритмом в 5 проходов.

Вместо вопроса «идентичны ли пиксели?» он спрашивает «идентичны ли CSS-свойства каждого элемента?». Изменился ли font-size? Сместился ли margin? Отличается ли цвет?

Это точнее (ноль ложных срабатываний от рендеринга) и информативнее (мы точно знаем, что изменилось и насколько). Но и сложнее в реализации.

Как выбрать между тремя методами

Ваш выбор зависит меньше от математики, а больше от контекста:

Нужны простота и скорость? Pixel diff. Примите ложные срабатывания как цену простоты.
Хотите игнорировать шум рендеринга? pHash или SSIM в зависимости от нужной точности.
Хотите точную диагностику без ложных срабатываний? Структурный подход (Delta-QA).
Не уверены? Начните с SSIM с порогом 0,98. Это лучший дефолтный компромисс.

FAQ

Какой метод самый быстрый?

Pixel diff самый быстрый. pHash чуть медленнее из-за преобразования. SSIM самый медленный, так как проходит изображение скользящим окном.

Какой метод даёт меньше ложных срабатываний?

SSIM в хорошо откалиброванном режиме. pHash также хорош для игнорирования шума, но может пропускать детали. Pixel diff даёт больше всего ложных срабатываний.

Используют ли инструменты только один метод?

Не всегда. Некоторые комбинируют pixel diff + SSIM. Другие добавляют слой ИИ сверху. Delta-QA использует структурный подход, не зависящий от сравнения изображений.

Может ли pHash обнаружить изменение цвета?

Только если изменение значительное. Переход тёмно-синего к чуть более светлому синему скорее всего проигнорируется. Переход с синего на красный — обнаружится.

Какой порог SSIM использовать для визуального теста?

Для строгого регрессионного теста: 0,99. Для мониторинга с толерантностью к шуму: 0,95-0,97. Ниже 0,95 рискуете пропускать реальные регрессии.

Pixel diff полностью устарел?

Нет. Для случаев, где абсолютная визуальная точность важна (логотипы, иконки, pixel-perfect дизайн), pixel diff остаётся актуальным. Для остального перцептуальные или структурные методы обычно уместнее.

Pixel diff говорит вам, что что-то изменилось. pHash говорит, отличается ли визуально в целом. SSIM говорит, насколько отличается для человеческого глаза. Структурный анализ говорит точно что изменилось и почему. Четыре подхода, четыре уровня ответа. Правильный выбор зависит от заданного вопроса.

Для углубления

Попробовать Delta-QA бесплатно →