Просмотрщик различий изображений

Четыре способа сравнения

• Бок о бок — самая простая проверка: оба изображения показаны в полном размере рядом друг с другом.
• Ползунок — перетаскиваемая перегородка показывает старое изображение с одной стороны и новое — с другой, идеально для изменений UI до/после.
• Луковая кожа — накладывает второе изображение на первое с регулируемой прозрачностью, отлично подходит для замечания сдвигов и расхождений выравнивания.
• Разница пикселей — сравнивает каждый пиксель и закрашивает изменившиеся в красный, так что даже изменение в один пиксель невозможно пропустить.

Метрика разницы пикселей

Вместо наивного вычитания RGB режим разницы пикселей использует метрику цветового расстояния YIQ — тот же подход, что и у популярной библиотеки pixelmatch. YIQ отделяет яркость (Y) от цветности (I, Q), что соответствует тому, как человеческий глаз воспринимает различие. Один ползунок порога управляет тем, насколько большим должно быть различие, прежде чем пиксель будет помечен.

Типичные сценарии

1. Тестирование регрессий UI — сравните скриншот до и после изменения кода.
2. Проверка дизайна — убедитесь, что сборка разработчика соответствует макету.
3. Контроль качества сжатия изображений — посмотрите, какие именно области изменил кодировщик.
4. Правки фото — подтвердите, какие пиксели затронула ретушь.

Всё работает на Canvas API в вашем браузере — без загрузок, без ожидания.