Перейти к основному содержимому
Develop Tools
← Вернуться к руководству по использованию

Как наложить два изображения и проверить попиксельную разницу

При изменении пользовательского интерфейса, редактировании изображений или проверке регрессий на скриншотах вы можете использовать отображение различий, чтобы обнаружить сдвиги на 1 пиксель и изменения цвета, которые трудно заметить невооруженным глазом.

Процесс выравнивания двух изображений, их расположения слева и справа, а также проверки наложения и разницы.
Процесс выравнивания двух изображений, их расположения слева и справа, а также проверки наложения и разницы.

Как использовать разные методы сравнения

Метод отображенияЛегко обнаружить различия
левая и правая параллельностьОсновные изменения планировки, упущения, дополнения.
ползунокРазличия в положении границ, размере и обрезке
Прозрачные слоиСмещение нескольких пикселей, масштабирование
Разница акцентовЦвет, контур и попиксельные изменения

Процедура сравнения

  1. Загрузите эталонное изображение слева и изображение сравнения справа.
  2. Если размеры отличаются, проверьте, является ли разница намеренной или обусловлена условиями хранения.
  3. Проверьте позиционный сдвиг с помощью ползунка и прозрачного наложения, затем переключитесь на выделение разницы.
  4. Определите место и причину недопустимых различий и при необходимости сохраните полученное изображение.

Факторы, которые имеют тенденцию вызывать различия

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

Поскольку шум сжатия JPEG меняется каждый раз при его сохранении, формат без потерь, такой как PNG, подходит для строгого сравнения пикселей.

Не считайте это неудачей только потому, что разница не равна 0%; вместо этого проверьте, находится ли положение и внешний вид разницы в допустимом диапазоне.

попробуйте в браузере

Ваш ввод будет обработан в вашем браузере. Пожалуйста, оставьте исходные данные и проверьте результаты перед сохранением и публикацией.

Открыть инструмент сравнения различий изображений