Что такое сравнение изображений?

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

Описание инструмента

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

Возможности

  • Сравнение изображений PNG, JPEG, WebP, GIF, BMP и AVIF
  • Подсчет отличающихся пикселей и отображение их доли от общего размера изображения
  • Объединение близлежащих различий в области с возможностью обвести каждую область на изображении различий
  • Пропуск сглаженных пикселей и обозначение их отдельным цветом либо включение их в подсчет
  • Настраиваемый порог, определяющий, насколько должны отличаться два цвета, чтобы считаться разными
  • Дополнительный цвет для пикселей, которые стали темнее, чтобы отличать добавленный контент от удаленного
  • Режим отображения только различий, в котором различия отображаются на прозрачном фоне
  • Масштабирование до 3200% с четкими пикселями и скачивание изображения различий в формате PNG
  • Режим просмотра с ползунком, который позволяет одновременно изменять масштаб и перемещать оба изображения, а также поддерживает полноэкранный режим
  • Сравнение изображений разного размера с выравниванием по левому верхнему углу или изменением размера второго изображения

Как это работает

Для сравнения используется pixelmatch — библиотека с открытым исходным кодом, лежащая в основе многих инструментов визуального тестирования. Для каждого пикселя измеряется цветовое расстояние в цветовом пространстве YIQ, в котором, как и человеческий глаз, больший вес придается яркости, а не оттенку. Пиксель считается отличающимся, если расстояние превышает пороговое значение. Перед тем как засчитать пиксель, pixelmatch проверяет соседние пиксели, чтобы определить, является ли он частью сглаженного края. Инструмент считывает значения пикселей, сохраненные в файлах, и игнорирует встроенные цветовые профили, поэтому два файла, декодирующиеся в одинаковые пиксели, всегда совпадают. Все операции выполняются в вашем браузере, а изображения никогда не загружаются на сервер.

Советы

  • Для снимков экрана оставляйте пороговое значение равным 0.1. Установите его на 0, чтобы обнаруживать любые изменения, включая шум сжатия JPEG; увеличьте его, чтобы игнорировать небольшие изменения цветов.
  • Фотография, дважды сохраненная в формате JPEG, отличается на тысячах пикселей, но лишь незначительно. Если результат не показывает различий выше порога, изображения выглядят одинаково.
  • Включите параметр «Отмечать более темные пиксели», чтобы увидеть, какой контент был добавлен, а какой удален: текст на светлом фоне становится темнее в тех местах, где появляется.
  • Для файлов GIF сравнивается только первый кадр.