What does the Image Compare Slider do?

Place two images side-by-side and drag a vertical handle left or right to reveal more of the 'before' or 'after' image. Useful for visualizing the result of image compression, resizing, color correction, or AI super-resolution.

Are my images uploaded anywhere?

No. Both images stay in your browser via object URLs created with URL.createObjectURL(). Nothing is sent to a server.

What image formats are supported?

Anything the browser can render — PNG, JPEG, GIF, WebP, SVG, AVIF (in modern browsers). Both images don't need to be the same format, but they should ideally have the same dimensions for the most useful comparison.

Posuvník pro porovnání obrázků

Beforechoose file…Afterchoose file…

Upload a 'before' and 'after' image to start comparing.

Technické detaily

Jak funguje posuvník pro porovnání obrázků

Co nástroj dělá

Posuvník pro porovnání obrázků překrývá dva obrázky a odhaluje pouze tu část, kterou chcete vidět, tažením svislého ovladače. Jak posouváte doleva a doprava, odhaluje se více z obrázku „před“ nebo „po“, takže jsou vizuální rozdíly vedle sebe okamžitě zřejmé. Zobrazují se velikosti souborů a procentuální změna, abyste viděli i dopad na úrovni bajtů.

Běžné případy použití pro vývojáře

Inženýři ověřující ztrátovou kompresi obrázků porovnávají verzi JPEG vs. WebP téhož zdroje. Designéři kontrolují změny v mapování tónů, retuši nebo korekci barev mezi návrhem a finální verzí. Inženýři ML/AI vizualizují výsledky super‑rozlišení, odstranění šumu nebo přenosu stylu oproti vstupům. Marketingové týmy vytvářejí působivé ukázky „před/po“ pro vstupní stránky.

Datové formáty, typy nebo varianty

Přijímá jakýkoli formát obrázku, který prohlížeč umí vykreslit — PNG, JPEG, WebP, AVIF, GIF, SVG. Obrázky zůstávají ve vašem prohlížeči přes object URL (URL.createObjectURL), takže se nic nenahrává. Pro co nejužitečnější porovnání by měly mít oba obrázky shodné rozměry a poměr stran; pokud se liší, oba se vykreslí s object-fit: contain, takže se žádný neoreže.

Běžné nástrahy a okrajové případy

Porovnávání obrázků s různým poměrem stran vytváří na jedné straně pruhy (letterbox). Velmi velké obrázky (>50 MB) mohou ve starších prohlížečích zpomalit interakci při přetahování. Posuvník odhaluje celý obrázek „po“ — pokud mají oba soubory průhlednost, umístěte posuvník nad neprůhlednou oblast, jinak uvidíte, jak pozadí stránky prosvítá skrz oba panely.

Kdy použít tento nástroj vs. kód

Použijte nástroj v prohlížeči pro ad-hoc porovnání během vývoje nebo pro rychlé ukázky pro stakeholdery. Na produkčních webech integrujte specializované knihovny jako react-compare-slider nebo img-comparison-slider kvůli přístupnosti, lazy loadingu a podpoře SSR; pro dávkové automatizované kontroly kvality napříč stovkami obrázků použijte nástroje založené na SSIM/PSNR, jako je ImageMagick `compare` nebo pixelmatch.