Об этом инструменте
Image Diff сравнивает два изображения попиксельно и точно показывает, где они отличаются, — всё прямо в вашем браузере. Перетащите скриншот или макет дизайна «до» в качестве изображения A и версию «после» — новый скриншот, реализованную версию того же дизайна или повторно экспортированную копию — в качестве изображения B. Если два изображения разного размера, оба размещаются на холсте, вмещающем большее из них; любая область, покрытая только одним изображением, засчитывается как различие, ведь само изменение размера — это то, что вы, скорее всего, хотите отследить. В результате получается изображение с различиями: изображение A перерисовывается заново, каждый изменившийся пиксель закрашивается ярким пурпурным цветом, а также выводится подсчёт и процент отличающихся пикселей в реальном времени.
Это по-настоящему полезный для разработчиков рабочий процесс: обнаружение визуальных регрессий путём сравнения двух скриншотов, сделанных до и после изменения CSS или компонента, попиксельная сверка реализованного интерфейса с исходным макетом дизайна, или выявление едва заметных блочных артефактов и полосатости, которые добавляет повторное сжатие JPEG/WebP уже однажды экспортированного изображения. Порог чувствительности определяет, насколько сильным должно быть изменение цвета, чтобы пиксель считался отличающимся — более низкие значения (ближе к 0) отмечают почти любое изменение, включая шум сжатия в 1–2 бита, а более высокие отмечают только явно заметные различия, что обычно и нужно при сравнении двух экспортов одного и того же исходного изображения. Ничего не загружается на сервер: оба изображения декодируются и сравниваются с помощью Canvas API прямо на вашем устройстве, и скачиваемое изображение с различиями создаётся точно так же.
Частые вопросы
Что произойдёт, если два изображения имеют разный размер?
Оба изображения размещаются на общем холсте, размер которого соответствует большему из двух, и любая область, покрытая только одним из изображений (поскольку другое меньше), считается различием — это правильно отражает несоответствие размеров как часть сравнения, а не молча растягивает одно изображение под другое (что исказило бы сравнение и скрыло бы тот факт, что они изначально разного размера).
Какой порог чувствительности использовать?
Низкий порог улавливает даже крошечные, едва заметные различия (полезно для обнаружения артефактов сжатия или очень незначительных изменений рендеринга), в то время как более высокий порог отмечает только явно отличающиеся пиксели (полезно для обнаружения значительных визуальных изменений, таких как перемещённые элементы или другой контент, игнорируя незначительный шум сглаживания/сжатия между в остальном идентичными изображениями). Начните примерно с середины диапазона и корректируйте в зависимости от того, видите ли вы слишком много шума (повысьте) или упускаете реальные различия (понизьте).