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.

Vaizdų palyginimo slankiklis

Beforechoose file…Afterchoose file…

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

Techninė informacija

Kaip veikia vaizdų palyginimo slankiklis

Ką daro įrankis

Vaizdų palyginimo slankiklis uždengia vieną vaizdą kitu ir, tempiant vertikalią rankenėlę, parodo tik tą dalį, kurią norite matyti. Slenkant į kairę ir į dešinę, atskleidžiama daugiau „prieš“ arba „po“ vaizdo, todėl vizualūs skirtumai iš karto tampa akivaizdūs. Taip pat rodomi failų dydžiai ir procentinis pokytis, kad matytumėte ir poveikį baitų lygiu.

Dažniausi kūrėjų naudojimo atvejai

Inžinieriai, tikrinantys nuostolingą vaizdų glaudinimą, lygina tos pačios pradinės medžiagos JPEG ir WebP versijas. Dizaineriai peržiūri tonų atvaizdavimo, retušavimo ar spalvų korekcijos pakeitimus tarp juodraščio ir galutinės versijos. ML/AI inžinieriai vizualizuoja superrezoliucijos, triukšmo šalinimo ar stiliaus perkėlimo rezultatus, lygindami juos su įvestimis. Rinkodaros komandos kuria įspūdingas „prieš/po“ demonstracijas nukreipimo puslapiams.

Duomenų formatai, tipai arba variantai

Priima bet kokį vaizdo formatą, kurį naršyklė gali atvaizduoti — PNG, JPEG, WebP, AVIF, GIF, SVG. Vaizdai lieka jūsų naršyklėje per objektų URL (URL.createObjectURL), todėl niekas neįkeliama. Kad palyginimas būtų naudingiausias, abu vaizdai turėtų turėti vienodus matmenis ir kraštinių santykį; jei jie skiriasi, abu atvaizduojami su object-fit: contain, kad nė vienas nebūtų apkirptas.

Dažniausios klaidos ir kraštiniai atvejai

Lyginant vaizdus su skirtingais kraštinių santykiais, vienoje pusėje atsiranda „letterbox“ juostos. Labai dideli vaizdai (>50 MB) senesnėse naršyklėse gali sulėtinti vilkimo sąveiką. Slankiklis atidengia visą „po“ vaizdą — jei abu failai turi skaidrumą, pastumkite slankiklį virš nepermatomos srities, kitaip matysite, kaip puslapių fonas persišviečia per abu langus.

Kada naudoti šį įrankį, o kada kodą

Naudokite naršyklės įrankį ad hoc palyginimui kūrimo metu arba greitoms demonstracijoms suinteresuotosioms šalims. Produkciniuose tinklalapiuose integruokite specializuotas bibliotekas, tokias kaip react-compare-slider arba img-comparison-slider, dėl prieinamumo, tingaus įkėlimo ir SSR palaikymo; masinėms automatizuotoms kokybės patikroms per šimtus vaizdų naudokite SSIM/PSNR pagrįstus įrankius, tokius kaip ImageMagick `compare` arba pixelmatch.