Vad är en bildjämförelse?

En bildjämförelse jämför två versioner av en bild pixel för pixel och markerar alla ställen där de skiljer sig åt. Utvecklare använder den för visuell regressionstestning: en skärmbild av en sida före en kodändring jämförs med en som tagits efter ändringen, så att en oavsiktlig förskjutning, en saknad ikon eller en ändrad färg framträder även när de två skärmbilderna ser likadana ut vid en snabb blick.

Verktygsbeskrivning

Det här verktyget jämför två bilder och skapar en diffbild: skillnaderna visas i rött över en blekt kopia av den första bilden. Det räknar pixlarna som skiljer sig åt, grupperar närliggande skillnader i regioner och mäter den yta de täcker. Utjämnade text- och formkanter identifieras som kantutjämning och lämnas utanför räkningen, så att en skärmbild som tagits med en något annorlunda teckengenerator inte visas som en förändring. Du kan också dra ett reglage över de två bilderna och zooma in på båda samtidigt.

Funktioner

  • Jämför PNG-, JPEG-, WebP-, GIF-, BMP- och AVIF-bilder
  • Räknar pixlarna som skiljer sig åt och visar dem som en andel av bilden
  • Grupperar närliggande skillnader i regioner och kan markera varje region med en kontur i diffbilden
  • Hoppar över kantutjämnade pixlar och markerar dem med en separat färg, eller räknar med dem om du föredrar det
  • Justerbar tröskel för hur mycket två färger måste skilja sig åt för att räknas som olika
  • Valfri andra färg för pixlar som blivit mörkare, så att tillagt innehåll kan skiljas från borttaget innehåll
  • Läge för endast skillnader, som ritar diffen på en transparent bakgrund
  • Zooma upp till 3200 % med skarpa pixlar och ladda ner diffen som en PNG-bild
  • Reglagevy som zoomar och panorera båda bilderna tillsammans, med ett helskärmsläge
  • Jämför bilder med olika storlek genom att justera dem mot det övre vänstra hörnet eller ändra storlek på den andra bilden

Så fungerar det

Jämförelsen använder pixelmatch, biblioteket med öppen källkod bakom många verktyg för visuell testning. För varje pixel mäter det färgavståndet i färgrymden YIQ, där ljusstyrka väger tyngre än färgton, precis som för ögat. En pixel räknas som annorlunda när avståndet ligger över tröskeln. Innan pixelmatch räknar en pixel kontrollerar det närliggande pixlar för att avgöra om den ingår i en kant med kantutjämning. Verktyget läser pixelvärdena som lagras i filerna och ignorerar inbäddade färgprofiler, så två filer som avkodas till samma pixlar alltid matchar. Allt körs i din webbläsare och bilderna laddas aldrig upp.

Tips

  • Behåll tröskeln på 0,1 för skärmbilder. Sänk den till 0 för att fånga alla förändringar, inklusive brus från JPEG-komprimering. Höj den för att ignorera små färgförskjutningar.
  • Ett foto som sparats som JPEG två gånger skiljer sig åt i tusentals pixlar med mycket små marginaler. Om resultatet säger att det inte finns några skillnader över tröskeln ser bilderna likadana ut.
  • Aktivera Markera mörkare pixlar för att se vilket innehåll som lades till och vilket som togs bort, eftersom text på en ljus bakgrund blir mörkare där den visas.
  • För GIF-filer jämförs endast den första bildrutan.