Porovnání obrázků

Nahrajte dva obrázky a porovnejte je tažným posuvníkem nebo zobrazením vedle sebe. Ideální pro úpravy před/po. Bez nahrávání.

Jak Posuvník porovnání obrázků funguje

Posuvník pro porovnání obrázků umožňuje načíst dva obrázky vedle sebe a přetažením svislého oddělovače odhalit více jednoho obrázku a méně druhého. Toto rozvržení před a po je přímý, nenáročný způsob, jak ukázat rozdíl mezi dvěma verzemi obrázku. Oba obrázky se načítají z vašeho lokálního disku pomocí File API a prohlížeč je vykresluje na obrazovce; nic se nenahrává na server.

Posuvník využívá přístup CSS clip-path, takže přechod mezi dvěma obrázky je vždy zarovnán na pixel a na hranici nedochází k žádnému mísení ani interpolaci. Rovněž můžete přepnout na zobrazení rozdělené obrazovky, které zobrazuje dva obrázky v pevných levém a pravém panelu. Nástroj je užitečný pro porovnání úprav fotografií, výsledků komprese, iterací návrhu nebo jakýchkoli dvou obrázků, kde potřebujete jasně vidět rozdíly.

Napsal Bastien Sulyan

Posuvník porovnání obrázků: návod krok za krokem

Přetáhněte první obrázek (původní verze) do levé oblasti nahrávání.
Přetáhněte druhý obrázek (upravená verze) do pravé oblasti nahrávání.
Přetáhněte oddělovač doleva a doprava pro zobrazení většího množství jednoho obrázku najednou.
Přepněte na rozdělené zobrazení pro zobrazení obou obrázků v pevných panelech, pokud preferujete statické porovnání.
Použijte tlačítko celé obrazovky pro maximalizaci porovnání pro podrobnou kontrolu.

Časté případy použití

Fotograf porovná původní export RAW s retušovanou verzí, aby zhodnotil, jak moc úprava obrázek změnila.
Vývojář zkontroluje pár obrázků před a po kompresi, aby posoudil, zda ztráta kvality při dané úrovni komprese je přijatelná.
UX návrhář prezentuje redesign uživatelského rozhraní umístěním starého snímku rozhraní vlevo a nového vpravo pro přehled zainteresovaných stran.
Redaktor obsahu ověří, zda je manipulace s obrázkem (barevná gradace, ořez) konzistentní mezi miniaturou a verzí v plné velikosti.

Často kladené otázky

Musí mít oba obrázky stejnou velikost?

Nástroj funguje nejlépe, když mají oba obrázky stejné rozměry, protože posuvník je přesně překrývá. Pokud se obrázky liší velikostí, nástroj je škáluje na společnou velikost zobrazení. Pokud jsou poměry stran odlišné, mohou se na okrajích objevit nesrovnalosti.

Jsou obrázky odesílány někam pro fungování porovnání?

Ne. Oba obrázky se načítají z vašeho souborového systému prostřednictvím File API a kreslí se do prvků Canvas ve vašem prohlížeči. Porovnání je operace vykreslování na straně klienta. Žádný obrázek neopustí vaše zařízení.

Mohu porovnat obrázky ze dvou různých URL místo lokálních souborů?

Aktuální nástroj přijímá pouze lokální soubory. Načítání obrázků ze vzdálených URL by vyžadovalo, aby je prohlížeč stáhl, a bylo by předmětem omezení CORS, která mnoho hostitelů obrázků nepovoluje.

Existuje maximální velikost obrázků, které porovnání zvládne?

Omezení je paměť Canvas vašeho prohlížeče. Obrázky do přibližně 20 megapixelů každý jsou na většině stolních zařízení zpracovány bez problémů. Velmi velké obrázky mohou zpomalit vykreslování nebo způsobit chybu paměti na zařízeních s nižším výkonem.

Mohu uložit snímek obrazovky konkrétní polohy posuvníku?

Nástroj pro snímání obrazovky vašeho operačního systému (nebo funkce snímku prohlížeče v DevTools) je přímočaré řešení pro zachycení konkrétní polohy posuvníku. Zobrazení porovnání samo o sobě nemá vestavěné tlačítko exportu pro sloučený obrázek.

Související nástroje

Zachovejte vše lokálně, prozkoumejte doplňkové nástroje.

Všechny nástroje na obrázky