Локальное сравнение пикселей в браузере

Проверка различий изображений, Результаты разницы пикселей.

Используйте проверку различий изображений, чтобы подсветить различия, найти изменённые пиксели, настроить порог и прочитать RMSE и PSNR.

Лаборатория пиксельных различий

Проверка различий изображений

Откройте реальный пример или проверьте свой файл PNG, JPG, JPEG либо WebP. Эта проверка различий пикселей обновляет оценки только после локального diff.

Изображения остаются в этом сеансе браузераPNG, JPG, JPEG, WebPОбновление показателей пикселей после Выделить разницу

Совпадение пикселей

Запустить локальный diffНужен локальный diff

Изменённые пиксели

Запустить локальный diffНужен локальный diff

RMSE

Запустить локальный diffНужен локальный diff

Случай различия 3 / 4

Ретушь портрета

Меняются кожа, тон и детали лица.

Подсветка различий

Запустите локальную проверку различий пикселей, чтобы создать предпросмотр с подсветкой различий.

18

Низкие значения находят тонкие изменения; высокие игнорируют шум сжатия, небольшие изменения освещения и сглаживание. Пиксель считается изменённым, когда максимальная дельта канала RGBA выше этого значения.

Пиксельные оценки ожидают расчёта

Анализировать различия

Запустите проверку различий изображений локально в браузере, чтобы заполнить результаты и боковые карточки.

Визуальные изменения

Запустить локальный diffНужен локальный diff

Средняя RGB-дельта

Запустить локальный diffНужен локальный diff

PSNR

Запустить локальный diffНужен локальный diff
1

Добавить изображения

Замените любую сторону. Проверка различий изображений запустит локальный diff для получения измеренных результатов.

Выберите или перетащите файл PNG, JPG, JPEG или WebP для Базовое изображение.

A

Базовый уровень/до

Предпросмотр Базовое изображение

portrait-before.webp

960 x 720px - 42 KB

Выберите или перетащите файл PNG, JPG, JPEG или WebP для Изменённое изображение.

B

Изменено/после

Предпросмотр Изменённое изображение

portrait-after.webp

960 x 720px - 44 KB
2

Проверка режимов различий

Подсветка различий — основной вид в проверке различий изображений; слайдер, режим рядом и наложение помогают проверить контекст.

3

Результаты различий изображений

Проверка различий изображений рассчитает локальные оценки после запуска локального diff рядом с просмотром. Расчёт выполняется в этом браузере.

01

Найти различия изображений

Эта проверка различий изображений отмечает изменённые пиксели красным, чтобы видимые правки было легко найти.

02

Настройте порог

Используйте 8 для строгой проверки UI, 18 для деталей фото, 32 для баланса и 64 для крупных различий изображений.

03

Читать метрики различий пикселей

Проверка различий изображений использует процент изменённых пикселей, среднюю RGB-дельту, RMSE и PSNR, чтобы объяснить разницу пары.

Метрики различий

Метрики проверки различий изображений

Проверка различий изображений отделяет визуальный обзор от вычисленных пиксельных результатов. Детали файла появляются после открытия; метрики обновляются после локального diff.

01

Измененные пиксели

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

02

Разница в процентах

Показывает изменённые пиксели как долю всех сопоставимых пикселей на нормализованном холсте проверки различий изображений.

03

RMSE и PSNR

В проверке различий изображений более низкое RMSE и более высокое PSNR означают, что изображения визуально ближе.

Метод

Как работает проверка различий пикселей

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

Пороговое изменение пикселей

В проверке различий изображений пиксель считается различием, когда наибольшая дельта красного, зелёного, синего или альфа-канала превышает выбранный порог.

Сопоставимое полотно

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

Читаемые метрики ошибок

Средняя RGB-дельта, RMSE и PSNR дают более техническое представление о тех же локальных различиях изображений, которые проверка различий изображений показывает в подсветке.

Варианты использования

Где помогает проверка различий изображений

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

01

Регрессионные проверки скриншотов

Используйте проверку различий изображений, чтобы найти изменения UI-скриншотов и оставить небольшой пороговый допуск для различий рендеринга.

02

Обзор ретуши фотографий и изделий

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

03

Обзор сжатия и экспорта

Используйте проверку различий изображений для файлов JPEG, PNG или WebP, чтобы увидеть видимые изменения пикселей после оптимизации.

04

Сравнение вариантов, созданное ИИ

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

05

Обзор фотографий портрета и лица

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

Часто задаваемые вопросы

Вопросы о проверке различий изображений

Ответы соответствуют видимой проверке различий изображений: локальный предпросмотр, проверка пикселей с порогом и отсутствие отправки на сервер.

Какой порог мне следует использовать?

В проверке различий изображений начните с 18. Используйте 8 для строгих UI-скриншотов, 18 для деталей фото, 32 для сбалансированной проверки и 64 для больших видимых изменений.

Как понять, что изображения загрузились?

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

Могу ли я сравнивать изображения, созданные ИИ?

Да. Проверка различий изображений может проверить два выбранных варианта, созданных ИИ; результаты представляют собой локальные измерения пикселей.

Могу ли я использовать его для сравнения лиц?

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