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 na porovnanie obrázkov

Beforechoose file…Afterchoose file…

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

Technické podrobnosti

Ako funguje posuvník na porovnanie obrázkov

Čo nástroj robí

Posuvník na porovnanie obrázkov prekrýva dva obrázky a zobrazuje iba tú časť, ktorú chcete vidieť, posúvaním zvislého ovládača. Keď posúvate doľava a doprava, odhaľuje sa viac z obrázka „pred“ alebo „po“, vďaka čomu sú vizuálne rozdiely vedľa seba okamžite zrejmé. Zobrazujú sa aj veľkosti súborov a percentuálna zmena, takže uvidíte aj dopad na úrovni bajtov.

Bežné prípady použitia pre vývojárov

Inžinieri pri overovaní stratovej kompresie obrázkov porovnávajú verziu JPEG vs. WebP toho istého zdroja. Dizajnéri kontrolujú zmeny v mapovaní tónov, retuši alebo korekcii farieb medzi návrhom a finálnou verziou. Inžinieri ML/AI vizualizujú výsledky super-rozlíšenia, odšumenia alebo prenosu štýlu oproti vstupom. Marketingové tímy vytvárajú pôsobivé ukážky pred/po pre vstupné stránky.

Dátové formáty, typy alebo varianty

Podporuje akýkoľvek formát obrázka, ktorý vie prehliadač vykresliť — PNG, JPEG, WebP, AVIF, GIF, SVG. Obrázky zostávajú vo vašom prehliadači cez object URL (URL.createObjectURL), takže sa nič nenahráva. Pre najužitočnejšie porovnanie by mali mať oba obrázky rovnaké rozmery a pomer strán; ak sa líšia, oba sa vykreslia s object-fit: contain, aby sa ani jeden neorezal.

Bežné úskalia a okrajové prípady

Porovnávanie obrázkov s odlišným pomerom strán vytvára na jednej strane pruhy (letterbox). Veľmi veľké obrázky (>50 MB) môžu v starších prehliadačoch spomaliť interakciu pri ťahaní. Posuvník odhaľuje celý „after“ obrázok — ak majú oba súbory priehľadnosť, umiestnite posuvník nad nepriehľadnú oblasť, inak uvidíte, ako cez oba panely presvitá pozadie stránky.

Kedy použiť tento nástroj vs. kód

Použite nástroj v prehliadači na ad-hoc porovnanie počas vývoja alebo na rýchle demo pre stakeholderov. Na produkčných webových stránkach integrujte špecializované knižnice ako react-compare-slider alebo img-comparison-slider kvôli prístupnosti, lazy loadingu a podpore SSR; na dávkové automatizované kontroly kvality naprieč stovkami obrázkov použite nástroje založené na SSIM/PSNR, ako ImageMagick `compare` alebo pixelmatch.