Порівняння зображень

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

Як працює Повзунок порівняння зображень

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

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

Автор: Bastien Sulyan

Повзунок порівняння зображень: покрокова інструкція

Скиньте перше зображення (версія «до») на ліву область завантаження.
Скиньте друге зображення (версія «після») на праву область завантаження.
Перетягніть роздільник ліворуч і праворуч, щоб відкривати більше одного зображення за раз.
Перейдіть до режиму розділеного перегляду, щоб побачити обидва зображення у фіксованих панелях, якщо надаєте перевагу статичному порівнянню.
Використайте кнопку повноекранного режиму для максимізації порівняння з метою детального огляду.

Поширені сценарії використання

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

Поширені запитання

Чи потрібно, щоб два зображення були однакового розміру?

Інструмент найкраще працює, коли обидва зображення мають однакові розміри, оскільки слайдер накладає їх точно. Якщо зображення відрізняються за розміром, інструмент масштабує їх до загального розміру відображення. На краях може з'явитися незначне неузгодження, якщо пропорції відрізняються.

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

Ні. Обидва зображення завантажуються з файлової системи через File API і малюються на елементах Canvas у браузері. Порівняння є операцією рендерингу на стороні клієнта. Жодне зображення не покидає пристрій.

Чи можна порівнювати зображення з двох різних URL, а не локальні файли?

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

Чи є максимальний розмір зображення, який може обробити порівняння?

Обмеження визначається пам'яттю Canvas браузера. Зображення до приблизно 20 мегапікселів кожне обробляються без проблем на більшості настільних пристроїв. Дуже великі зображення можуть уповільнити рендеринг або спричинити помилку пам'яті на маломощному обладнанні.

Чи можна зберегти знімок екрана конкретної позиції слайдера?

Інструмент знімка екрана операційної системи (або функція знімка екрана браузера в DevTools) є прямолінійним способом зафіксувати конкретну позицію слайдера. Сам вигляд порівняння не має вбудованої кнопки експорту для об'єднаного зображення.

Схожі інструменти

Тримайте все локально, досліджуйте додаткові інструменти.

Усі інструменти для зображень