Сравнение изображений

Загрузите два изображения и сравните их с помощью перетаскиваемого слайдера или вида рядом. Идеально для правок до/после. Без загрузки.

Как работает Слайдер сравнения изображений

Слайдер сравнения изображений позволяет загрузить два изображения рядом и перетащить вертикальный разделитель, чтобы показать больше одного и меньше другого. Такой макет «до и после» является прямым и удобным способом показать разницу между двумя версиями изображения. Оба изображения загружаются с локального диска через File API и отрисовываются в браузере; ничто не загружается на сервер.

Слайдер использует подход CSS clip-path, поэтому переход между двумя изображениями всегда выровнен по пикселям, без смешивания или интерполяции на границе. Можно также переключиться на режим разделённого экрана, показывающий два изображения в фиксированных левой и правой панелях. Инструмент полезен для сравнения результатов редактирования фото, сжатия, итераций дизайна или любых двух изображений, где нужно чётко видеть различия.

Автор: Bastien Sulyan

Слайдер сравнения изображений: пошаговая инструкция

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

Частые сценарии использования

Фотограф сравнивает оригинальный экспорт RAW с отретушированной версией, чтобы оценить, насколько редактирование изменило изображение.
Разработчик проверяет пару изображений до и после сжатия, чтобы оценить, приемлема ли потеря качества при заданном уровне сжатия.
UX-дизайнер представляет редизайн интерфейса, размещая старый скриншот интерфейса слева, а новый справа для ревью стейкхолдеров.
Редактор контента проверяет, что манипуляция с изображением (цветокоррекция, обрезка) согласована между миниатюрой и полноразмерной версией.

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

Должны ли оба изображения быть одного размера?

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

Отправляются ли изображения куда-либо для сравнения?

Нет. Оба изображения загружаются из файловой системы через File API и рисуются в Canvas-элементах в браузере. Сравнение является операцией рендеринга на стороне клиента. Ни одно изображение не покидает устройство.

Можно ли сравнивать изображения из двух разных URL вместо локальных файлов?

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

Есть ли максимальный размер изображения для сравнения?

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

Можно ли сохранить скриншот конкретного положения слайдера?

Инструмент создания скриншотов операционной системы (или функция скриншотов в DevTools браузера) является удобным способом захвата определённого положения слайдера. У самого вида сравнения нет встроенной кнопки экспорта объединённого изображения.