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

Заредете две изображения и ги сравнете с плъзгащ плъзгач или изглед едно до друго. Перфектно за редакции преди/след. Без качване.

Как работи Плъзгач за сравнение на изображения

Плъзгачът за сравнение на изображения ви позволява да заредите две изображения едно до друго и да плъзнете вертикален разделител, за да разкриете повече от едното изображение и по-малко от другото. Това оформление с преди и след е директен, леснодостъпен начин да се покаже разликата между две версии на изображение. И двете изображения се зареждат от локалния диск с File API и се изобразяват на екрана от браузъра; нищо не се качва на сървър.

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

Написано от Bastien Sulyan

Как да използвате Плъзгач за сравнение на изображения, стъпка по стъпка

Пуснете първото изображение (версията преди) върху лявата зона за качване.
Пуснете второто изображение (версията след) върху дясната зона за качване.
Плъзнете разделителя наляво и надясно, за да разкриете повече от едното изображение наведнъж.
Превключете към разделен изглед, за да видите двете изображения в фиксирани панели, ако предпочитате статично сравнение.
Използвайте бутона за цял екран, за да увеличите сравнението за подробна проверка.

Често срещани приложения

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

Често задавани въпроси

Трябва ли двете изображения да са с еднакъв размер?

Инструментът работи най-добре, когато двете изображения имат еднакви размери, тъй като плъзгачът ги наслагва точно. Ако изображенията се различават по размер, инструментът ги мащабира до общ размер за показване. Може да се появи известно несъответствие по краищата, ако съотношенията на страните са различни.

Изпращат ли се изображенията за извършване на сравнението?

Не. И двете изображения се зареждат от файловата система чрез File API и се изчертават в Canvas елементи в браузъра. Сравнението е операция за изобразяване от страна на клиента. Нито едно изображение не напуска устройството.

Мога ли да сравнявам изображения от два различни URL адреса, а не от локални файлове?

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

Има ли максимален размер на изображението, което сравнението може да обработи?

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

Мога ли да запазя снимка на екрана на конкретна позиция на плъзгача?

Инструментът за снимки на екрана на операционната система (или функцията за снимки на екрана в DevTools на браузъра) е лесният начин за заснемане на конкретна позиция на плъзгача. Самият изглед за сравнение няма вграден бутон за експортиране на обединено изображение.

Свързани инструменти

Пазете всичко локално, разгледайте допълнителни инструменти.

Всички инструменти за изображения