Obraz i zdjęcie

Suwnica porównawcza obrazów

Umieść dwa obrazy i ujawnij różnicę za pomocą przesuwanego dzielnika, ułóż je obok siebie lub nałóż jeden na drugi — przydatne do przeglądów projektów, poprawek retuszu i fotografii przed/po.

Before

Drop or click to upload

After

Drop or click to upload

Both images stay on this device. Nothing is uploaded — comparison runs entirely in your browser.

Czym jest suwnica porównawcza obrazów?

Suwnica porównawcza obrazów pozwala na nałożenie dwóch obrazów na siebie i ujawnienie jednego lub drugiego poprzez przesuwanie dzielnika wzdłuż ramki. To standardowe narzędzie do wszelkich wizualizacji 'przed vs. po': poprawki zdjęć, redesigny interfejsu użytkownika, dwa renderingi tej samej sceny, dwa kolory tego samego ujęcia, budowa A vs. budowa B modelu 3D. Tryb obok siebie pokazuje oba jednocześnie dla porównań proporcji. Tryb nakładki z przejściem przechodzi między nimi za pomocą suwaka przezroczystości, co jest przydatne do dostrzegania subtelnych przesunięć wyrównania lub różnic tonalnych, które ukryłby twardy dzielnik. Wszystko dzieje się lokalnie — oba obrazy pozostają na Twoim urządzeniu, porównanie renderuje się w przeglądarce, a nic nie jest przesyłane.

Jak porównać dwa obrazy

1
Prześlij swój obraz przed
Upuść plik JPG, PNG, WebP, GIF, BMP lub AVIF w slot przed, lub kliknij, aby wybrać z urządzenia. Obraz renderuje się w panelu, a obszar roboczy pojawia się poniżej.
2
Prześlij swój obraz po
Upuść drugi obraz w slot po. Dla najlepszych wyników oba obrazy powinny mieć te same wymiary — kontener porównawczy blokuje się na proporcjach pierwszego obrazu, który załadujesz.
3
Wybierz tryb porównania
Suwnica nakłada dwa obrazy na siebie z przesuwanym dzielnikiem. Obok siebie umieszcza je w dwóch kolumnach. Nakładka z przejściem przechodzi między nimi za pomocą suwaka przezroczystości — przydatne do dostrzegania przesunięcia wyrównania.
4
Przesuń dzielnik lub suwak
W trybie suwnicy, przesuń w dowolnym miejscu w obszarze porównania, aby przesunąć dzielnik. Zmień dzielnik na pionowy, jeśli Twoje obrazy porównują się od góry do dołu, a nie od lewej do prawej. W trybie przejścia, przesuń suwak przezroczystości po.
5
Zamień, zresetuj lub załaduj nowe pliki
Użyj Swap, aby zamienić A i B bez ponownego przesyłania. Resetuje obie obrazy i przywraca przestrzeń roboczą do domyślnych ustawień. Ładuj nowe pliki w dowolnym momencie, upuszczając je na slot — nie ma potrzeby najpierw resetować.

Jak działa suwak

1. Oba obrazy renderują się z object-fit: contain w kontenerze z zablokowanym proporcjonalnym rozmiarem.
2. Obraz po znajduje się w nakładce o absolutnym położeniu.
3. CSS clip-path: inset(0 [100 - position]% 0 0) ujawnia tylko lewą stronę nakładki.
4. Tryb pionowy zamienia oś inset: clip-path: inset(0 0 [100 - position]% 0).
5. Zdarzenia wskaźnika aktualizują pozycję na podstawie przesunięcia kursora w obrębie prostokąta ograniczającego kontenera.
6. Tryb zanikania pomija clip-path i po prostu animuje przezroczystość od 0 do 1 na obrazie po.

Użycie clip-path utrzymuje oba obrazy w pełnej jakości bez ponownego kodowania canvas — to, co widzisz, to plik źródłowy piksel po pikselu, po prostu zamaskowany. Obsługa przeciągania rejestruje pointermove na oknie, dzięki czemu dzielnik nadal śledzi, nawet jeśli kursor opuści obszar porównania w trakcie przeciągania. Zablokowanie proporcji oznacza, że kontener skaluje się z szerokością strony bez zniekształcania obrazów, a object-fit: contain elegancko radzi sobie z przypadkiem, gdy dwa obrazy mają nieco różne wymiary.

Referencja: MDN — clip-path

Typowe porównania przed/po

Przykład użycia	Najlepszy tryb
Przechodzenie retuszu zdjęć (skóra, wymiana nieba, gradacja kolorów)	Suwak — przeciągnij dzielnik przez ramkę, aby dokładnie zobaczyć, gdzie znajdują się edycje. Utrzymuj oba pliki w tych samych wymiarach, aby linia dzielnika miała sens.
Redesign strony — zrzuty ekranu starego układu vs. nowego układu	Suwak dla sekcji hero, obok siebie, gdy przewijanie ma znaczenie. Zrób oba zrzuty ekranu przy tej samej szerokości widoku, w przeciwnym razie porównanie nie będzie równe.
Dwa renderingi tej samej sceny 3D z różnym oświetleniem	Zanikanie nakładki — przejście między nimi, aby dostrzec subtelne przesunięcia GI lub cienia. Tryb zanikania jest również świetny do dostrzegania, gdzie denoiser zmienił szczegóły.
Zrzut ekranu zgłoszenia błędu vs. oczekiwany wynik	Obok siebie — inżynierowie mogą zobaczyć oba jednocześnie bez przewijania. Dodaj suwak na górze w wątku problemu na moment 'ujawnienia'.
Mapa lub wykres z dwoma stanami danych (marzec vs. kwiecień)	Suwak — przesuń przez wykres, aby zobaczyć, które obszary się zmieniły. Pionowy dzielnik dobrze działa dla map geograficznych porównujących północ z południem.

Kiedy używać suwaka porównawczego

Recenzje retuszu zdjęć — pokaż klientom dokładnie, co się zmieniło w jednym przeciągnięciu.
Recenzje projektów — porównaj stary i nowy układ sekcji hero bez dwóch kart przeglądarki.
Iteracja renderowania 3D — zanikaj między dwoma ustawieniami oświetlenia, aby dostrzec subtelne przesunięcia globalnego oświetlenia.
Gradacja kolorów — przesuń dzielnik przez ramkę, aby ocenić LUT lub przejście gradacji.
Zgłoszenia błędów — połącz zrzut ekranu z błędem z oczekiwanym, aby triagerzy nie musieli przewijać.
Nieruchomości przed/po — zaaranżowane vs. niezaaranżowane lub przed-renowacją vs. po-renowacji.
Wizualizacja danych — porównaj dwa zrzuty tego samego wykresu lub mapy wykonane w różnych momentach.

Powiązane narzędzia

Usuwacz Tła

Wytnij obiekt z dowolnego zdjęcia za pomocą AI na urządzeniu — bez potrzeby przesyłania.

Kompresor Obrazów

Zmniejsz pliki JPG, PNG lub WebP w swojej przeglądarce za pomocą interaktywnego suwaka jakości.

Edytor zdjęć

Dostosuj, filtruj, obracaj i przycinaj zdjęcia w przeglądarce — bez przesyłania, bez znaku wodnego.

Twórca Memów

Twórz memy i kolaże zrzutów ekranu z prawdziwymi warstwami — wklejaj, przeciągaj, przycinaj, podpisuj, eksportuj.

Najczęściej zadawane pytania

Czy moje obrazy są przesyłane?

Nie. Oba obrazy są odczytywane za pomocą FileReader i renderowane lokalnie w elementach <img>. Nakładka porównawcza jest czystym CSS — clip-path i przezroczystość. Możesz zweryfikować w zakładce sieci, że żadne bajty obrazu nie opuszczają strony po załadowaniu narzędzia.

Co jeśli moje dwa obrazy mają różne wymiary?

Kontener blokuje swoje proporcje do tego obrazu, który przesyłasz jako pierwszy, a oba obrazy używają object-fit: contain, więc są letterboxed zamiast rozciągnięte. Aby uzyskać czyste przed/po, oba obrazy powinny idealnie mieć te same wymiary, ale narzędzie radzi sobie z niedopasowaniami elegancko.

Czy mogę wyeksportować wynik?

To narzędzie jest stworzone do przeglądania na żywo, a nie do eksportu — nie produkuje gotowego GIF-a ani wideo z przesuwania suwaka. Aby udostępnić, zrób zrzut ekranu lub nagraj ekran porównania. Do statycznych eksportów obok siebie użyj trybu obok siebie i zrzutu ekranu.

Dlaczego jest przełącznik dzielnika poziomego i pionowego?

Większość porównań przed/po czyta od lewej do prawej, ale niektóre nie — zdjęcia z góry na dół, układy przewijane porównywane na wysokości hero, mapy geograficzne z podziałem północ/południe. Tryb dzielnika pionowego zamienia oś clip, więc ujawnienie przesuwa się z góry na dół zamiast z boku na bok.

Do czego służy tryb zanikania nakładki?

Tryb zanikania jest odpowiednim wyborem, gdy różnica między A a B jest subtelna — małe przesunięcia kolorów, zmiany w antyaliasingu, lekkie przesunięcia wyrównania. Twardy dzielnik ukrywa to, ponieważ obie strony dzielnika pokazują różne piksele. Zanik przechodzi między nimi, abyś mógł zobaczyć, jak zmiana pojawia się podczas przesuwania.

Czy istnieje maksymalny rozmiar obrazu?

Każde przesłanie jest ograniczone do 25 MB. Nie ma limitu wymiarów pikseli, ale bardzo duże obrazy (powyżej ~6,000 px po dłuższym boku) mogą renderować się wolno na starszych urządzeniach, ponieważ obie kopie są przechowywane w pamięci jednocześnie. Kompresowanie do JPG lub WebP najpierw sprawia, że porównanie jest płynne.

Jaka jest różnica między tym a narzędziami do różnicowania obrazów, które pokazują różnice pikseli?

Narzędzia do różnicowania pikseli podświetlają każdy piksel, który się zmienił na czerwono — przydatne do automatyzacji QA, ale wizualnie hałaśliwe. Suwak porównawczy pokazuje rzeczywiste obrazy obok siebie, aby człowiek mógł zobaczyć, co się zmieniło i zdecydować, czy zmiana ma znaczenie. Są komplementarne: używaj narzędzi do różnicowania do testów regresyjnych, a suwaka porównawczego do przeglądów projektów i redakcji.

Ostatnia aktualizacja: 2026-04-29

Czym jest suwnica porównawcza obrazów?

Jak porównać dwa obrazy

Prześlij swój obraz przed

Upuść plik JPG, PNG, WebP, GIF, BMP lub AVIF w slot przed, lub kliknij, aby wybrać z urządzenia. Obraz renderuje się w panelu, a obszar roboczy pojawia się poniżej.

Prześlij swój obraz po

Upuść drugi obraz w slot po. Dla najlepszych wyników oba obrazy powinny mieć te same wymiary — kontener porównawczy blokuje się na proporcjach pierwszego obrazu, który załadujesz.

Wybierz tryb porównania

Suwnica nakłada dwa obrazy na siebie z przesuwanym dzielnikiem. Obok siebie umieszcza je w dwóch kolumnach. Nakładka z przejściem przechodzi między nimi za pomocą suwaka przezroczystości — przydatne do dostrzegania przesunięcia wyrównania.

Przesuń dzielnik lub suwak

W trybie suwnicy, przesuń w dowolnym miejscu w obszarze porównania, aby przesunąć dzielnik. Zmień dzielnik na pionowy, jeśli Twoje obrazy porównują się od góry do dołu, a nie od lewej do prawej. W trybie przejścia, przesuń suwak przezroczystości po.

Zamień, zresetuj lub załaduj nowe pliki

Użyj Swap, aby zamienić A i B bez ponownego przesyłania. Resetuje obie obrazy i przywraca przestrzeń roboczą do domyślnych ustawień. Ładuj nowe pliki w dowolnym momencie, upuszczając je na slot — nie ma potrzeby najpierw resetować.

Jak działa suwak

1. Oba obrazy renderują się z object-fit: contain w kontenerze z zablokowanym proporcjonalnym rozmiarem.
2. Obraz po znajduje się w nakładce o absolutnym położeniu.
3. CSS clip-path: inset(0 [100 - position]% 0 0) ujawnia tylko lewą stronę nakładki.
4. Tryb pionowy zamienia oś inset: clip-path: inset(0 0 [100 - position]% 0).
5. Zdarzenia wskaźnika aktualizują pozycję na podstawie przesunięcia kursora w obrębie prostokąta ograniczającego kontenera.
6. Tryb zanikania pomija clip-path i po prostu animuje przezroczystość od 0 do 1 na obrazie po.

Typowe porównania przed/po

Przykład użycia	Najlepszy tryb
Przechodzenie retuszu zdjęć (skóra, wymiana nieba, gradacja kolorów)	Suwak — przeciągnij dzielnik przez ramkę, aby dokładnie zobaczyć, gdzie znajdują się edycje. Utrzymuj oba pliki w tych samych wymiarach, aby linia dzielnika miała sens.
Redesign strony — zrzuty ekranu starego układu vs. nowego układu	Suwak dla sekcji hero, obok siebie, gdy przewijanie ma znaczenie. Zrób oba zrzuty ekranu przy tej samej szerokości widoku, w przeciwnym razie porównanie nie będzie równe.
Dwa renderingi tej samej sceny 3D z różnym oświetleniem	Zanikanie nakładki — przejście między nimi, aby dostrzec subtelne przesunięcia GI lub cienia. Tryb zanikania jest również świetny do dostrzegania, gdzie denoiser zmienił szczegóły.
Zrzut ekranu zgłoszenia błędu vs. oczekiwany wynik	Obok siebie — inżynierowie mogą zobaczyć oba jednocześnie bez przewijania. Dodaj suwak na górze w wątku problemu na moment 'ujawnienia'.
Mapa lub wykres z dwoma stanami danych (marzec vs. kwiecień)	Suwak — przesuń przez wykres, aby zobaczyć, które obszary się zmieniły. Pionowy dzielnik dobrze działa dla map geograficznych porównujących północ z południem.

Kiedy używać suwaka porównawczego

Recenzje retuszu zdjęć — pokaż klientom dokładnie, co się zmieniło w jednym przeciągnięciu.

Recenzje projektów — porównaj stary i nowy układ sekcji hero bez dwóch kart przeglądarki.

Iteracja renderowania 3D — zanikaj między dwoma ustawieniami oświetlenia, aby dostrzec subtelne przesunięcia globalnego oświetlenia.

Gradacja kolorów — przesuń dzielnik przez ramkę, aby ocenić LUT lub przejście gradacji.

Zgłoszenia błędów — połącz zrzut ekranu z błędem z oczekiwanym, aby triagerzy nie musieli przewijać.

Nieruchomości przed/po — zaaranżowane vs. niezaaranżowane lub przed-renowacją vs. po-renowacji.

Wizualizacja danych — porównaj dwa zrzuty tego samego wykresu lub mapy wykonane w różnych momentach.