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.

Attēlu salīdzināšanas slīdnis

Beforechoose file…Afterchoose file…

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

Tehniskā informācija

Kā darbojas attēlu salīdzināšanas slīdnis

Ko rīks dara

Attēlu salīdzināšanas slīdnis pārklāj divus attēlus un, velkot vertikālu rokturi, atklāj tikai to daļu, kuru vēlaties redzēt. Bīdot pa kreisi un pa labi, tiek atklāta lielāka daļa no “pirms” vai “pēc” attēla, padarot vizuālās atšķirības uzreiz skaidri pamanāmas. Tiek parādīti arī failu izmēri un procentuālās izmaiņas, lai jūs varētu redzēt ietekmi arī baitu līmenī.

Biežākie izstrādātāju lietošanas gadījumi

Inženieri, kas pārbauda zudumainu attēlu saspiešanu, salīdzina viena un tā paša avota JPEG un WebP versijas. Dizaineri pārskata toņu kartēšanas, retušēšanas vai krāsu korekcijas izmaiņas starp melnrakstu un galīgo versiju. ML/AI inženieri vizualizē superizšķirtspējas, trokšņu samazināšanas vai stila pārneses rezultātus, salīdzinot tos ar ievaddatiem. Mārketinga komandas veido iespaidīgas “pirms/pēc” demonstrācijas galvenajām lapām.

Datu formāti, tipi vai varianti

Pieņem jebkuru attēla formātu, ko pārlūks spēj attēlot — PNG, JPEG, WebP, AVIF, GIF, SVG. Attēli paliek jūsu pārlūkā, izmantojot objektu URL (URL.createObjectURL), tāpēc nekas netiek augšupielādēts. Lai salīdzinājums būtu pēc iespējas noderīgāks, abiem attēliem jābūt ar vienādiem izmēriem un malu attiecību; ja tie atšķiras, abi tiek attēloti ar object-fit: contain, lai neviens netiktu apgriezts.

Biežākās kļūdas un robežgadījumi

Salīdzinot attēlus ar atšķirīgām malu attiecībām, vienā pusē parādās letterbox joslas. Ļoti lieli attēli (>50 MB) vecākos pārlūkos var palēnināt vilkšanas mijiedarbību. Slīdnis atklāj visu “pēc” attēlu — ja abiem failiem ir caurspīdīgums, novietojiet slīdni virs necaurspīdīgas zonas, citādi redzēsiet, kā lapas fons spīd cauri abiem paneļiem.

Kad izmantot šo rīku, nevis kodu

Izmantojiet pārlūka rīku ad-hoc salīdzināšanai izstrādes laikā vai ātrām demonstrācijām ieinteresētajām pusēm. Ražošanas vietnēs integrējiet specializētas bibliotēkas, piemēram, react-compare-slider vai img-comparison-slider, lai nodrošinātu piekļūstamību, slinko ielādi un SSR atbalstu; savukārt masveida automatizētām kvalitātes pārbaudēm simtiem attēlu izmantojiet uz SSIM/PSNR balstītus rīkus, piemēram, ImageMagick `compare` vai pixelmatch.