Bildskillnadskontrollguide

Hur man använder en bilddifferenskontroll

Granskning på pixelnivå för skärmdumpar, komprimeringsexporter, produktredigeringar och små visuella ändringar som kräver lokala skillnadsmått.

BildskillnadskontrollguideGuider
01

Börja med att matcha baslinjen och ändrade filer från samma scen, layout, visningsport eller exportarbetsflöde.

02

Kör Markerad diff för att detektera ändrat område, bekräfta sedan resultatet i skjutreglaget, sida vid sida eller överläggsvy.

03

Använd tröskelvärde, ändrade pixlar, RMSE och PSNR som granskningssignaler. Det slutliga bedömningen kommer fortfarande från det synliga resultatet.

Pixelgranskning för exakt ändrade områden

En bilddifferenskontroll lokaliserar skillnader mellan två relaterade bilder. Det passar gränssnittskontroller, produktretuschgranskning, komprimeringsexportgranskning och små visuella ändringar som är lätta att missa i ett reglage.

Verktyget jämför webbläsaravkodade pixlar på en delad arbetsyta. En pixel räknas som ändrad när det största röda, gröna, blåa eller alfakanalsdeltatet överskrider det valda tröskelvärdet.

Arbetsflöde

Diff granskning sekvens

Ladda baslinjebilden först

Använd originalet, föregående skärmdump eller referensexport som baslinjebild. En tydlig baslinje gör förändringar i antal pixlar lättare att upptäcka.

Ladda den ändrade bilden sekund

Använd den nya skärmdumpen, redigerade bilden, optimerade bilden eller exporterade varianten som den ändrade bilden. Dimensioner som inte överensstämmer kräver en anpassningskontroll innan mätvärdesgranskning.

Kör Markerad diff

Markera skillnader markerar ändrade områden och fyller de metriska korten. Skjutreglage, sida vid sida och överläggsvyer verifierar det markerade resultatet i visuellt sammanhang.

Justera tröskeln medvetet

Lägre trösklar fångar upp subtila förändringar. Högre tröskelvärden ignorerar kompressionsbrus, små ljusförskjutningar och kantutjämning. Uppdatera diff efter att ha ändrat tröskeln.

Tröskel

Hur man väljer en diff-tröskel

Tröskeln ställer in kanalskillnadens cutoff för ändrade pixlar. Det finns inget universellt bästa värde; matcha värdet med granskningsuppgiften.

8

Strikta UI-kontroller

Prova 8 för små skärmdumpsändringar som bör fångas tydligt.

  • En knappetikett har ändrats från Spara till Använd.

  • En ikon flyttade sig något, en tunn ram försvann eller textavståndet ändrades.

Detta värde kan också fånga upp litet renderingsbrus runt text och kanter.

18

Fina fotodetaljer

Försök med 18 för bildredigeringar som bara är synliga efter en närmare titt.

  • En produktskugga blev mjukare, en ansiktsretusch tog bort en liten märke eller tygets struktur ändrades.

  • Ett foto ser nästan likadant ut, men en höjdpunkt, reflektion eller färgfläck har redigerats.

Bra för närmare granskning.

32

Balanserad standard

Börja med 32 för de flesta jämförelser.

  • En skärmdump av en målsida har både text och foton.

  • En produktbild exporterades igen, eller så behöver en förhandsgranskning från ett annat verktyg en snabb kontroll.

Justera lägre för strängare kontroller, högre för brusigare filer.

64

Stora synliga förändringar

Försök 64 för att fokusera på uppenbara förändringar.

  • En bakgrund ersattes, ett objekt flyttades, en beskärning ändrades eller en stark färgförskjutning uppträdde.

  • En JPEG- eller WebP-export har lite brus, men granskningen gäller bara ändringar som människor snabbt lägger märke till.

Liten text, fina ikoner och hårkanter kanske inte längre sticker ut.

Mätvärden

Hur man läser bildskillnadsmåtten

Ändrade pixlar

Antalet jämförbara canvaspixlar över det aktuella tröskelvärdet. Värdet beror mycket på tröskel och justering.

Ändrad pixelprocent

Ändrade pixlar dividerat med alla jämförbara pixlar. Det hjälper till att jämföra två körningar med olika bildstorlekar eller beskärningsområden.

Medel RGB delta

Den genomsnittliga absoluta RGB-kanalskillnaden. Breda skiftningar av färg eller ljusstyrka kan visas här även med en liten procentandel av ändrad yta.

RMSE

RGB-fel för rotmedelkvadrat. Större lokala skillnader påverkar RMSE starkare än små spridda skillnader.

PSNR

Högsta signal-brusförhållande. Högre PSNR betyder vanligtvis att bilderna är närmare i RGB-signal; lägre PSNR betyder mer synligt eller mätbart fel.

Vanliga fallgropar

Olika resultat som behöver en andra titt

Bilderna är något förskjutna

Ett skift på 1 px kan lysa upp många områden, även om bilden ser nästan identisk ut. Öppna Överlägg och kontrollera om huvudkanterna är i linje.

Bildstorlekarna stämmer inte överens

Olika bredder eller höjder gör jämförelsen mindre direkt. Använd de visuella vyerna för att hitta den synliga förändringen, beskära eller exportera sedan matchande storlekar för renare mätvärden.

Kompressionsbrus dyker upp

JPEG- och WebP-exporter lägger ofta till små fläckar över jämna färgytor och kanter. Höj tröskeln om granskningen gäller synliga redigeringar.

Textkanterna ändrades under renderingen

Teckensnitt, ikoner och vektorkanter kan landa på lite olika pixlar efter en webbläsare, ett teckensnitt eller en exportändring. Använd en låg tröskel för skärmdump QA och bekräfta sedan det markerade området med ögat.

Användningsfall

Granska uppgifter för den här guiden

Regressionsgranskning av UI-skärmdump

Jämförelse av bildkomprimeringskvalitet

Retuschering av produktfoto

Före och efter redigeringskontroller

Små layout- eller exportskillnader

Prova

Öppna verktyget efter att ha läst guiden

Ladda en baslinjebild och en ändrad bild, kör Markerad diff och justera sedan tröskeln tills de markerade områdena matchar granskningsuppgiften.

Öppna verktyg

FAQ

Använd en bildskillnadskontroll

Vilken tröskel ska jag använda i en bilddifferenskontroll?

Börja med 32 för allmän granskning. Använd 8 för strikta skärmdumpskontroller av samma storlek, 18 för fina fotodetaljer och 64 för större synliga ändringar.

Vad skapar många förändrade pixlar i liknande bilder?

Små justeringsförskjutningar, kantutjämning, kompressionsbrus, färgprofilskillnader och små ljusförändringar kan alla räknas som ändrade pixlar. Använd överläggsvy och tröskeljustering för att förstå resultatet.

Är RMSE och PSNR bättre än ändrad pixelprocent?

De svarar på en annan fråga. Ändrad pixelprocent visar hur mycket yta som passerade tröskeln, medan RMSE och PSNR sammanfattar RGB-fel över den jämförbara arbetsytan.

Är min bilddata säker?

Ja. Bildförhandsgranskning och pixeljämförelse körs lokalt i din webbläsare. Diff kräver ingen serveruppladdning, så din bilddata förblir i den aktiva webbläsarsessionen.