Che cos'è una differenza tra immagini?

Una differenza tra immagini confronta due versioni di un'immagine pixel per pixel e contrassegna ogni punto in cui differiscono. Gli sviluppatori la usano per i test di regressione visiva: uno screenshot di una pagina acquisito prima di una modifica al codice viene confrontato con uno acquisito dopo, così uno spostamento involontario, un'icona mancante o un colore cambiato risaltano anche quando, a colpo d'occhio, i due screenshot sembrano uguali.

Descrizione dello strumento

Questo strumento confronta due immagini e crea un'immagine delle differenze: le differenze in rosso sovrapposte a una copia sbiadita della prima immagine. Conta i pixel diversi, raggruppa le differenze vicine in regioni e misura l'area che coprono. I bordi smussati di testo e forme vengono rilevati come antialiasing ed esclusi dal conteggio, così uno screenshot acquisito con un renderer di font leggermente diverso non viene considerato una modifica. Puoi anche trascinare un cursore sulle due immagini e ingrandirle entrambe contemporaneamente.

Funzionalità

  • Confronta immagini PNG, JPEG, WebP, GIF, BMP e AVIF
  • Conta i pixel diversi e li mostra come percentuale dell'immagine
  • Raggruppa le differenze vicine in regioni e può delineare ogni regione nell'immagine delle differenze
  • Ignora i pixel con antialiasing e li contrassegna con un colore separato, oppure li conta se preferisci
  • Soglia regolabile per stabilire quanto devono essere diversi due colori per essere considerati differenti
  • Secondo colore opzionale per i pixel che sono diventati più scuri, per distinguere i contenuti aggiunti da quelli rimossi
  • Modalità con sole differenze, che disegna le differenze su uno sfondo trasparente
  • Ingrandimento fino al 3200% con pixel nitidi e possibilità di scaricare le differenze come immagine PNG
  • Vista con cursore che ingrandisce e sposta entrambe le immagini insieme, con modalità a schermo intero
  • Confronta immagini di dimensioni diverse allineandole in alto a sinistra oppure ridimensionando la seconda immagine

Come funziona

Il confronto utilizza pixelmatch, la libreria open source alla base di molti strumenti di test visivo. Per ogni pixel misura la distanza cromatica nello spazio dei colori YIQ, che, come l'occhio umano, dà più peso alla luminosità che alla tonalità. Un pixel viene considerato diverso quando la distanza supera la soglia. Prima di conteggiarlo, pixelmatch controlla i pixel adiacenti per stabilire se fa parte di un bordo con antialiasing. Lo strumento legge i valori dei pixel memorizzati nei file e ignora i profili colore incorporati, quindi due file che vengono decodificati negli stessi pixel corrispondono sempre. Tutto viene eseguito nel browser e le immagini non vengono mai caricate.

Suggerimenti

  • Mantieni la soglia a 0,1 per gli screenshot. Impostala su 0 per rilevare ogni modifica, inclusi gli artefatti della compressione JPEG; aumentala per ignorare piccoli cambiamenti di colore.
  • Una foto salvata due volte in formato JPEG differisce in migliaia di pixel per una quantità minima. Se il risultato non rileva differenze superiori alla soglia, le immagini appaiono uguali.
  • Attiva Segna i pixel più scuri per vedere quali contenuti sono stati aggiunti e quali rimossi, poiché il testo su uno sfondo chiaro diventa più scuro nei punti in cui appare.
  • Per i file GIF viene confrontato solo il primo fotogramma.