Hva er en bildedifferanse?

En bildedifferanse sammenligner to versjoner av et bilde piksel for piksel og markerer alle steder der de er forskjellige. Utviklere bruker dette til visuell regresjonstesting: Et skjermbilde av en side før en kodeendring sammenlignes med et som er tatt etterpå, slik at en utilsiktet forskyvning, et manglende ikon eller en endret farge blir tydelig, selv når de to skjermbildene ser like ut ved første øyekast.

Verktøybeskrivelse

Dette verktøyet sammenligner to bilder og tegner et differansebilde: forskjellene vises i rødt over en uttonet kopi av det første bildet. Det teller pikslene som er forskjellige, grupperer nærliggende forskjeller i områder og måler arealet de dekker. Utjevnede tekst- og formkanter oppdages som antialiasering og utelates fra opptellingen, slik at et skjermbilde som er tatt med en litt annen skriftrasterer, ikke vises som en endring. Du kan også dra en glidebryter over de to bildene og zoome inn på begge samtidig.

Funksjoner

  • Sammenlign PNG-, JPEG-, WebP-, GIF-, BMP- og AVIF-bilder
  • Teller de forskjellige pikslene og viser dem som en andel av bildet
  • Grupperer nærliggende forskjeller i områder og kan tegne omrisset av hvert område i differansebildet
  • Hopper over antialiaserte piksler og markerer dem med en separat farge, eller teller dem hvis du foretrekker det
  • Justerbar terskel for hvor langt fra hverandre to farger må være for å telles som forskjellige
  • Valgfri ekstra farge for piksler som har blitt mørkere, slik at du kan skille lagt til innhold fra fjernet innhold
  • Modus for bare forskjeller, som tegner differansen på en transparent bakgrunn
  • Zoom opptil 3200 % med skarpe piksler, og last ned differansen som et PNG-bilde
  • Glidebrytervisning som zoomer og panorerer begge bildene samtidig, med fullskjermmodus
  • Sammenlign bilder med ulik størrelse ved å justere dem etter øvre venstre hjørne eller endre størrelsen på det andre bildet

Slik fungerer det

Sammenligningen bruker pixelmatch, biblioteket med åpen kildekode som ligger bak mange verktøy for visuell testing. For hver piksel måler det fargeavstanden i YIQ-fargerommet, som legger større vekt på lysstyrke enn på fargetone, slik øyet gjør. En piksel telles som forskjellig når avstanden er over terskelen. Før pixelmatch teller en piksel, kontrollerer det nabopikslene for å avgjøre om den er en del av en antialiasert kant. Verktøyet leser pikselverdiene som er lagret i filene, og ignorerer innebygde fargeprofiler, slik at to filer som dekodes til de samme pikslene, alltid samsvarer. Alt kjører i nettleseren din, og bildene lastes aldri opp.

Tips

  • Behold terskelen på 0,1 for skjermbilder. Senk den til 0 for å fange opp alle endringer, inkludert støy fra JPEG-komprimering, eller øk den for å ignorere små fargeforskjeller.
  • Et bilde som lagres som JPEG to ganger, kan være forskjellig i tusenvis av piksler med svært små avvik. Hvis resultatet sier at det ikke finnes forskjeller over terskelen, ser bildene like ut.
  • Slå på Marker mørkere piksler for å se hvilket innhold som ble lagt til, og hvilket som ble fjernet, siden tekst på en lys bakgrunn blir mørkere der den vises.
  • For GIF-filer sammenlignes bare det første bildet.