Сравнение изображений онлайн — найти отличия
Находит и отмечает отличающиеся пиксели двух изображений, есть наложение и шторка
Работает в браузере · файлы никуда не загружаются
Изображение A (оригинал)
Изображение A (оригинал)
Сначала добавьте эталонное изображение. JPG, PNG, WebP, GIF или BMP; можно и вставить через Ctrl+V.
Изображение B (изменённое)
Изображение B (изменённое)
Добавьте изменённое изображение. Когда A уже загружено, вставка (Ctrl+V) идёт в B.
0 улавливает малейшее изменение цвета; чем выше значение, тем больше похожие цвета считаются одинаковыми. По умолчанию 0,1 — игнорирует обычный шум сжатия JPG.
Если выключено, отличающиеся пиксели мягких краёв показываются жёлтым и не учитываются.
Добавьте оба изображения — сравнение начнётся сразу.
Что делает инструмент
Инструмент находит, чем отличаются два похожих изображения, вплоть до отдельных пикселей. Небольшие правки текста, сдвиг на 1 пиксель или смена цвета, которые легко пропустить, переключаясь между картинками, отмечаются красным. Так можно убедиться, что изменения на сайте отобразились как задумано, найти, что поменял дизайнер в новой версии, или проверить цветопробу. Кроме режима различий, изображения можно наложить друг на друга или разделить шторкой «до/после».
Как пользоваться
- Поместите эталонное изображение в Изображение A, а изменённое — в Изображение B. Скриншоты можно вставлять через Ctrl+V; когда A уже заполнено, вставка идёт в B.
- Сравнение начинается, как только оба изображения на месте: появляются число и доля отличающихся пикселей и положение изменённой области.
- Передвиньте Чувствительность, чтобы решить, насколько мелкие изменения цвета игнорировать.
- В пункте Вид выберите «Различия», «Наложение» (с непрозрачностью B) или «Шторка» (A слева, B справа).
- Нажмите Сохранить PNG с различиями, чтобы скачать результат.
Как это работает
- Попиксельное сравнение: цвета в одной и той же точке сравниваются по расстоянию в цветовом пространстве YIQ, которое учитывает восприятие яркости человеком. Порог 0 улавливает малейшее изменение, значения около 1 очень снисходительны. По умолчанию 0,1.
- Сглаживание: пиксели, которые по соседям определяются как мягкие края, рисуются жёлтым и не учитываются (настраивается).
- Изображение различий: неизменённые области показывают оригинал бледно-серым (10%), отличающиеся пиксели — красным.
- Размер: при более чем 8 миллионах пикселей оба изображения для сравнения уменьшаются в одинаковое число раз, а координаты изменённой области пересчитываются к исходным пикселям A.
- Движок сравнения — pixelmatch (лицензия ISC).
Примеры
| A | B | Результат |
|---|---|---|
| Скриншот «до», 1280×800 | Та же страница с новым текстом кнопки | Красное только вокруг кнопки, координаты области показаны |
| Фото PNG | Тот же файл ещё раз | Сообщение «Различий нет» |
| Баннер 1200×600 | Баннер, обрезанный до 1000×600 | При сохранённых размерах отличается вся обрезанная полоса 200 px |
Для различий в тексте воспользуйтесь сравнением текстов, а чтобы вырезать часть изображения и рассмотреть её внимательнее, — обрезкой изображений.
Частые вопросы
Можно ли сравнить изображения разного размера?
Да. «Подогнать B под A» подходит для одного и того же экрана, сохранённого в другом разрешении; «Сохранить размеры, выровнять по левому верхнему углу» — для обрезанного или расширенного изображения. При сохранённых размерах всё, что есть только на одном изображении, считается отличием.
У JPG показывается слишком много отличий.
Сжатие JPG оставляет крошечные изменения цвета, которых не видно глазом. Если поднять порог с 0,1 примерно до 0,2–0,3, этот шум игнорируется, а настоящие изменения остаются.
Что означают жёлтые пиксели?
Это пиксели мягких краёв текста и линий (сглаживание), которые слегка отличаются — часто просто из-за отрисовки шрифтов. По умолчанию они показываются жёлтым и не учитываются; отметьте параметр, чтобы считать и их.
Для чего это нужно?
Чтобы сравнить скриншоты сайта до и после изменений, найти правки в новой версии макета, сверить типографскую цветопробу с оригиналом или решить головоломку «найди отличия».
Мои изображения загружаются на сервер?
Нет. Оба изображения сравниваются только в вашем браузере.
