Control lliscant de comparació d'imatges

Com funciona el control lliscant de comparació d'imatges

Què fa l’eina

El control lliscant de comparació d'imatges superposa dues imatges i només mostra la part que vols veure arrossegant un mànec vertical. A mesura que llisques cap a l'esquerra i cap a la dreta, es revela més de la imatge 'abans' o 'després', fent que les diferències visuals costat a costat siguin immediatament evidents. També es mostren les mides dels fitxers i el percentatge de canvi perquè puguis veure l'impacte a nivell de bytes.

Casos d’ús habituals per a desenvolupadors

Els enginyers que verifiquen la compressió d'imatges amb pèrdua comparen una versió JPEG amb una WebP de la mateixa font. Els dissenyadors revisen canvis de mapatge de tons, retoc o correcció de color entre un esborrany i la versió final. Els enginyers de ML/IA visualitzen resultats de superresolució, reducció de soroll o transferència d'estil en comparació amb les seves entrades. Els equips de màrqueting creen demostracions impactants d'abans/després per a pàgines de destinació.

Formats, tipus o variants de dades

Accepta qualsevol format d’imatge que el navegador pugui renderitzar — PNG, JPEG, WebP, AVIF, GIF, SVG. Les imatges es mantenen al teu navegador mitjançant URL d’objecte (URL.createObjectURL), de manera que no es puja res. Per a una comparació més útil, les dues imatges haurien de tenir dimensions i relació d’aspecte coincidents; si difereixen, totes dues es renderitzen amb object-fit: contain perquè no se’n retalli cap.

Errors habituals i casos límit

Comparar imatges amb relacions d’aspecte diferents produeix bandes de letterbox a un costat. Les imatges molt grans (>50 MB) poden alentir la interacció d’arrossegament en navegadors antics. El lliscador mostra la imatge 'after' sencera — si tots dos fitxers tenen transparència, col·loca el lliscador sobre una zona opaca o veuràs el fons de la pàgina traspuant a través de tots dos panells.

Quan utilitzar aquesta eina vs codi

Fes servir l’eina del navegador per a comparacions ad-hoc durant el desenvolupament o per a demos ràpides amb stakeholders. En webs en producció, integra biblioteques dedicades com react-compare-slider o img-comparison-slider per a accessibilitat, càrrega diferida i compatibilitat amb SSR; per a comprovacions de qualitat automatitzades per lots sobre centenars d’imatges, fes servir eines basades en SSIM/PSNR com ImageMagick `compare` o pixelmatch.