Kép-összehasonlító csúszka

Hogyan működik a képek összehasonlítására szolgáló csúszka

Mit csinál az eszköz

A Kép-összehasonlító csúszka egymásra helyez két képet, és egy függőleges fogantyú húzásával csak azt a részt teszi láthatóvá, amelyet látni szeretnél. Ahogy balra és jobbra csúsztatsz, egyre több tárul fel az „előtte” vagy az „utána” képből, így az egymás melletti vizuális különbségek azonnal nyilvánvalóvá válnak. A fájlméretek és a százalékos változás is megjelenik, így a bájtszintű hatást is láthatod.

Gyakori fejlesztői felhasználási esetek

A veszteséges képtömörítést ellenőrző mérnökök összehasonlítják ugyanannak a forrásnak a JPEG és WebP változatát. A dizájnerek áttekintik a tónusleképezés, a retusálás vagy a színkorrekció változásait egy vázlat és a végleges verzió között. Az ML/AI mérnökök a szuperfelbontás, a zajcsökkentés vagy a stílusátvitel eredményeit vizualizálják a bemeneteikhez képest. A marketingcsapatok látványos előtte/utána demókat készítenek landing oldalakhoz.

Adatformátumok, típusok vagy változatok

Bármilyen képformátumot elfogad, amit a böngésző meg tud jeleníteni — PNG, JPEG, WebP, AVIF, GIF, SVG. A képek a böngészőben maradnak objektum URL-eken keresztül (URL.createObjectURL), így semmi sem kerül feltöltésre. A leghasznosabb összehasonlításhoz a két képnek azonos méretekkel és képaránnyal kell rendelkeznie; ha eltérnek, mindkettő object-fit: contain beállítással jelenik meg, így egyik sem lesz levágva.

Gyakori buktatók és szélső esetek

Eltérő képarányú képek összehasonlításakor az egyik oldalon letterbox sávok jelennek meg. A nagyon nagy képek (>50 MB) régebbi böngészőkben lelassíthatják a húzásos interakciót. A csúszka a teljes „utána” képet fedi fel — ha mindkét fájl átlátszóságot tartalmaz, helyezd a csúszkát egy átlátszatlan terület fölé, különben az oldal háttere mindkét panelen át fog látszani.

Mikor érdemes ezt az eszközt használni a kód helyett

Használd a böngészős eszközt ad-hoc összehasonlításhoz fejlesztés közben, vagy gyors stakeholder demókhoz. Éles weboldalakon integrálj dedikált könyvtárakat, például a react-compare-slider vagy az img-comparison-slider megoldást az akadálymentesség, a lusta betöltés és az SSR-támogatás érdekében; több száz kép közötti, kötegelt automatizált minőségellenőrzéshez pedig használj SSIM/PSNR-alapú eszközöket, például az ImageMagick `compare` parancsát vagy a pixelmatch-et.