Comparare imagini (diff)
Compară două imagini la nivel de pixel: diferențele evidențiate cu roșu, procentul pixelilor diferiți. Prag de sensibilitate. În browser, privat.
Despre ce este acest instrument?
Instrumentul de comparare imagini confruntă două imagini pixel cu pixel și evidențiază cu roșu zonele diferite, plus arată ce procent din pixeli diferă. Încarcă o imagine „A” și una „B”, reglează pragul de sensibilitate și vezi imediat harta diferențelor. Util pentru compararea versiunilor, exporturilor, variantelor comprimate sau iterațiilor de design. Totul rulează în browserul tău, imaginile nu ajung pe server.
Cum să folosești Comparare imagini (diff)?
-
Două imagini
Încarcă o imagine A și una B.
-
Prag
Reglează pragul de sensibilitate cu glisorul.
-
Diff
Citește harta roșie a diferențelor și procentul.
-
Descărcare
Descarcă imaginea diff, dacă e nevoie.
Când ai nevoie de el?
-
Verificare versiune
Confruntarea a două variante ale unei imagini – ce s-a schimbat?
-
Compresie
Verificarea vizuală a diferenței dintre imaginea originală și cea comprimată.
-
Design
Trecerea rapidă în revistă a diferențelor dintre două iterații de design.
-
Test de regresie
Depistarea schimbării unui render sau screenshot între două stări.
Notațiile diff-ului
| Zonă | Semnificație |
|---|---|
| Roșu | Pixel diferit (peste prag) |
| Estompat | Pixel identic (sau sub prag) |
| Procent | Proporția pixelilor diferiți |
De ce e util diff-ul de imagini?
Între două imagini asemănătoare e greu de găsit cu ochiul liber diferențele mici – un element deplasat, o schimbare de nuanță sau un artefact de compresie scapă ușor atenției. Compararea la nivel de pixel face asta vizibil: arată exact unde și cât diferă cele două imagini.
Acest lucru e util atât în dezvoltare, cât și în design. Dezvoltatorii îl folosesc ca test de regresie (o modificare nu a stricat o afișare), designerii pentru compararea a două iterații, iar fotografii pentru verificarea efectului compresiei. Pragul de sensibilitate ajută la separarea schimbărilor importante de zgomotul nesemnificativ.
Sfaturi utile
-
Pentru cel mai precis rezultat, compară imagini de aceeași dimensiune.
-
Pentru a filtra zgomotul de compresie, crește pragul; pentru diferențe mici, scade-l.
-
Densitatea petelor roșii arată imediat unde se concentrează schimbarea.
-
Poți compara liniștit și imagini confidențiale – totul rămâne local.
Întrebări frecvente
- Instrumentul aduce ambele imagini la dimensiunea A, apoi compară la fiecare pixel valorile de culoare. Dacă diferența e peste prag, colorează pixelul cu roșu; altfel îl afișează estompat. La final calculează proporția pixelilor diferiți.
- Pragul reglează cât de mare trebuie să fie o diferență ca să conteze drept „diferență”. Un prag mic semnalează și cele mai mici diferențe (ex. zgomot de compresie); unul mai mare evidențiază doar schimbările vizibile.
- Instrumentul scalează a doua imagine la dimensiunea primei (A) înainte de comparare. Pentru cel mai precis rezultat, folosește imagini de aceeași dimensiune.
- Proporția pixelilor diferiți (peste prag) față de totalul pixelilor. 0% înseamnă imagini identice (peste prag); cu cât numărul e mai mare, cu atât sunt mai multe diferențe.
- Nu. Întreaga comparare are loc în browserul tău, cu canvas – imaginile nu părăsesc dispozitivul.