Bildedifferansesjekker
Last opp to bilder og se en pikselnøyaktig visuell differanse mellom dem, med perseptuell YIQ-sammenligning og utheving som tar hensyn til anti-aliasing – 100 % lokalt i nettleseren din.
🔒 Behandles i sin helhet i nettleseren din – ingenting du skriver inn her blir noen gang lastet opp.
Resultat
Har du sendt ut en CSS-justering og vil vite nøyaktig hva som flyttet på seg? Sammenligner du to skjermbilder for en visuell regresjonstest i QA? Lurer du på hva som faktisk endret seg mellom to eksporterte versjoner av det samme bildet? Å bla frem og tilbake mellom to bilder og myse etter forskjeller er tregt og upålitelig – dette verktøyet legger de to over hverandre og viser deg hver enkelt endret piksel i ett bilde.
Sammenligningen bruker ekte matematikk for pikseldifferanser, den samme algoritmefamilien som brukes av verktøy som pixelmatch: hver piksel i begge bildene konverteres fra RGB til YIQ-fargerommet (Y = luma, I og Q = NTSC-krominansaksene), og den euklidske avstanden mellom de to YIQ-punktene beregnes. Denne avstanden måles mot en terskel satt av følsomhetsglidebryteren – øk følsomheten for å fange opp subtile fargeskift, senk den for å ignorere komprimeringsstøy og kun bry deg om åpenbare endringer.
En naiv piksel-for-piksel-sammenligning ville uthevd enhver anti-aliaset kant som «forskjellig» selv når ingenting meningsfylt har endret seg, fordi kantutjevning forskyver en håndfull kantpiksler med noen få nyanser. Dette verktøyet kjører en ekte anti-aliasing-heuristikk på begge bildene: en piksel behandles bare som en genuin forskjell hvis den IKKE befinner seg i en utjevningsgradient – konkret, hvis dens eget 3×3-nabolag i ett av kildebildene ikke allerede inneholder både en lysere og en mørkere piksel enn seg selv, noe som er fingeravtrykket til en AA-utjevnet kant i stedet for faktisk innhold.
Last opp Bilde A og Bilde B, juster følsomheten ved behov og trykk Utfør. Du får en nøyaktig prosentandel av piksler som er forskjellige, pluss et differansebilde der hver reelle endring er uthevd i skarp magenta over en nedtonet versjon av originalen – last det ned og legg det rett ved i feilrapporten eller QA-notatene dine. Begge bildene må ha samme dimensjoner; hvis ikke, forteller verktøyet deg det rett ut i stedet for å stille beskjære eller strekke ett av dem. Ingenting forlater nettleseren din på noe tidspunkt.