Porównanie obrazów

Załaduj dwa obrazy i porównaj je suwakiem lub widokiem obok siebie. Idealne do edycji przed/po. Bez przesyłania.

Jak działa Suwak porównania obrazów

Suwak porównania obrazów pozwala załadować dwa obrazy obok siebie i przeciągać pionowy rozdzielnik, aby odsłaniać więcej jednego obrazu, a mniej drugiego. Ten układ przed i po to bezpośredni sposób pokazania różnicy między dwiema wersjami obrazu. Oba obrazy są ładowane z lokalnego dysku za pomocą File API i renderowane w przeglądarce; nic nie jest przesyłane na serwer.

Suwak używa podejścia CSS clip-path, więc przejście między dwoma obrazami jest zawsze wyrównane do pikseli i nie ma mieszania ani interpolacji na granicy. Możesz też przełączyć się na widok podzielonego ekranu, który pokazuje dwa obrazy w stałych panelach lewym i prawym. Narzędzie jest przydatne do porównywania edycji zdjęć, wyników kompresji, iteracji projektowych lub dowolnych dwóch obrazów, gdzie trzeba wyraźnie zobaczyć różnice.

Napisał Bastien Sulyan

Suwak porównania obrazów: instrukcja krok po kroku

Upuść pierwszy obraz (wersja „przed”) na lewy obszar przesyłania.
Upuść drugi obraz (wersja „po”) na prawy obszar przesyłania.
Przeciągnij rozdzielnik w lewo i prawo, aby odsłonić więcej jednego obrazu na raz.
Przełącz na widok podzielonego ekranu, aby zobaczyć oba obrazy w stałych panelach, jeśli wolisz statyczne porównanie.
Użyj przycisku pełnego ekranu, aby zmaksymalizować porównanie do szczegółowej inspekcji.

Typowe zastosowania

Fotograf porównuje oryginalny eksport RAW z retuszowaną wersją, aby ocenić, jak bardzo edycja zmieniła obraz.
Programista sprawdza parę obrazów przed i po kompresji, aby ocenić, czy utrata jakości przy danym poziomie kompresji jest akceptowalna.
Projektant UX prezentuje przeprojektowanie interfejsu, umieszczając stary zrzut ekranu po lewej, a nowy po prawej stronie podczas przeglądu przez interesariuszy.
Redaktor treści sprawdza, czy manipulacja obrazem (gradacja kolorów, przycinanie) jest spójna między miniaturą a wersją pełnorozmiarową.

Często zadawane pytania

Czy dwa obrazy muszą mieć ten sam rozmiar?

Narzędzie działa najlepiej, gdy oba obrazy mają te same wymiary, ponieważ suwak nakłada je dokładnie. Jeśli obrazy różnią się rozmiarem, narzędzie skaluje je do wspólnego rozmiaru wyświetlania. Pewne niedopasowanie może pojawić się na krawędziach, jeśli formaty są różne.

Czy obrazy są gdzieś wysyłane, aby porównanie działało?

Nie. Oba obrazy są ładowane z systemu plików za pomocą File API i rysowane w elementach Canvas w przeglądarce. Porównanie to operacja renderowania po stronie klienta. Żaden obraz nie opuszcza Twojego urządzenia.

Czy mogę porównywać obrazy z dwóch różnych adresów URL zamiast plików lokalnych?

Bieżące narzędzie przyjmuje tylko lokalne pliki. Ładowanie obrazów ze zdalnych adresów URL wymagałoby pobrania ich przez przeglądarkę i podlegałoby ograniczeniom CORS, których wiele hostów obrazów nie zezwala.

Czy istnieje maksymalny rozmiar obrazu, który porównanie może obsłużyć?

Ograniczeniem jest pamięć Canvas przeglądarki. Obrazy do około 20 megapikseli każdy są obsługiwane bez problemu na większości urządzeń stacjonarnych. Bardzo duże obrazy mogą spowolnić renderowanie lub spowodować błąd pamięci na słabszym sprzęcie.

Czy mogę zapisać zrzut ekranu określonej pozycji suwaka?

Narzędzie do zrzutów ekranu systemu operacyjnego (lub funkcja zrzutu ekranu w DevTools przeglądarki) to najprostszy sposób uchwycenia konkretnej pozycji suwaka. Sam widok porównania nie ma wbudowanego przycisku eksportu scalonego obrazu.

Powiązane narzędzia

Utrzymuj wszystko lokalnie, odkrywaj narzędzia uzupełniające.

Wszystkie narzędzia do obrazów