Controllo differenze immagine

Hai inviato una modifica CSS e vuoi sapere esattamente cosa si è spostato? Confronto di due screenshot per un controllo di regressione visiva del QA? Ti chiedi cosa è effettivamente cambiato tra due versioni esportate della stessa foto? Scorrere avanti e indietro tra due immagini e strizzare gli occhi per individuare le differenze è lento e inaffidabile: questo strumento sovrappone le due immagini e mostra ogni pixel modificato in un'unica immagine.

Il confronto è una vera matematica di differenza dei pixel, la stessa famiglia di algoritmi utilizzati da strumenti come pixelmatch: ogni pixel di entrambe le immagini viene convertito da RGB nello spazio colore YIQ (Y = luma, I e Q = assi di crominanza NTSC) e viene calcolata la distanza euclidea tra i due punti YIQ. Tale distanza viene confrontata con una soglia impostata dal cursore della sensibilità: aumenta la sensibilità per rilevare sottili variazioni di colore, abbassala per ignorare il rumore di compressione e preoccuparti solo dei cambiamenti evidenti.

Un ingenuo confronto per pixel illuminerebbe ogni bordo anti-aliasing come "diverso" anche quando non è cambiato nulla di significativo, perché lo smussamento sposta una manciata di pixel del bordo di alcune sfumature. Questo strumento esegue una vera e propria euristica anti-aliasing su entrambe le immagini: un pixel viene trattato come una vera differenza solo se NON si trova all'interno di un gradiente di smussamento - concretamente, se il suo quartiere 3x3 in ciascuna immagine sorgente non contiene già sia un pixel più chiaro che uno più scuro di se stesso, che è l'impronta digitale di un bordo smussato AA piuttosto che del contenuto reale.

Carica l'immagine A e l'immagine B, regola la sensibilità se necessario e premi Esegui. Ottieni una percentuale esatta di pixel che differiscono più un'immagine di differenza con ogni modifica reale evidenziata in magenta brillante rispetto a una versione attenuata dell'originale: scaricala e allegala direttamente alla segnalazione di bug o alle note di QA. Entrambe le immagini devono condividere le stesse dimensioni; in caso contrario, lo strumento te lo dice chiaramente invece di ritagliarne o allungarne silenziosamente uno. Niente lascia il tuo browser in nessun momento.