Caricamento...
Caricamento...
Trascina due immagini e evidenzia ogni pixel cambiato. Regola la soglia per ignorare il rumore di compressione minore, vedi la percentuale esatta di cambiamento ed esporta le differenze come PNG.
Scegli due immagini per iniziare a confrontarle pixel per pixel.
Un visualizzatore di differenze pixel confronta due immagini a livello di pixel e evidenzia ogni posizione in cui i valori di colore differiscono. È l'equivalente visivo di un diff di codice: vedi esattamente cosa è cambiato tra due screenshot, due esportazioni di design o due istantanee da un test di regressione. Questo strumento funziona interamente nel tuo browser utilizzando l'API HTML Canvas. Scansiona ogni pixel nell'immagine A rispetto al pixel corrispondente nell'immagine B, somma le differenze assolute dei canali e dipinge qualsiasi pixel sopra la tua soglia nel colore di evidenziazione che scegli. Ottieni anche una percentuale di cambiamento in modo da poter quantificare quanto le due immagini differiscano effettivamente.
Trascina o scegli l'immagine A (la base) e l'immagine B (la versione che vuoi confrontare). Si raccomandano dimensioni uguali; le dimensioni non corrispondenti vengono ridimensionate automaticamente all'immagine A.
Evidenzia i cambiamenti è la modalità predefinita: ogni pixel cambiato viene dipinto nel tuo colore di evidenziazione. Affiancato mostra A, B e il diff in un'unica striscia; Sovrapposizione sovrappone B al 50% di opacità su A.
Trascina il cursore della soglia verso l'alto per ignorare il rumore di compressione minore e piccoli artefatti JPEG. Il 5% è un buon punto di partenza per foto compresse; lo 0% cattura ogni singola differenza di pixel.
La percentuale di cambiamento ti dice quale frazione di pixel supera la soglia: utile per la revisione della regressione o il QA del design.
Clicca su Scarica per salvare il diff renderizzato a piena risoluzione. Utile per allegati di revisione del codice e segnalazioni di bug.
Per ogni posizione di pixel p, con canali (r, g, b) dalle immagini A e B: diff(p) = |Ar - Br| + |Ag - Bg| + |Ab - Bb| Un pixel è considerato diverso quando: diff(p) > (soglia% × 765) / 100 dove 765 = 3 × 255 è la massima differenza di somma dei canali. Questo è lo stesso metodo di distanza L1 utilizzato da strumenti di diff immagine come pixelmatch e resemble.js, espresso come una singola soglia regolabile piuttosto che tolleranze per canale.
La distanza L1 (Manhattan) sui canali RGB è la metrica più semplice che cattura sia i cambiamenti di colore che i cambiamenti di luminosità. L'alpha viene ignorato perché la maggior parte dei casi d'uso del diff (screenshot, regressioni fotografiche) opera su immagini opache. Per immagini con dimensioni diverse, l'immagine B viene ridimensionata all'immagine A utilizzando un filtraggio bilineare di alta qualità prima che il confronto venga eseguito.
Riferimento: pixelmatch — confronto immagine a livello di pixel
| Input | Risultato del diff |
|---|---|
Due PNG identici 1920×1080 | 0% cambiamento — il diff è completamente spento Nessun pixel supera la soglia; passaggio ideale del test di regressione. |
Due JPEG della stessa scena a qualità dell'85% | ~1–2% con soglia = 0 Il rumore di compressione crea piccole differenze per pixel; alza la soglia al 5% per ignorare. |
Esportazione design A vs B (colore del pulsante cambiato) | Cambiamento confinato al rettangolo del pulsante Il colore di evidenziazione rende la regione modificata immediatamente visibile. |
Ritaglia il soggetto da qualsiasi foto con AI su dispositivo — nessun upload richiesto.
Riduci le dimensioni dei file JPG, PNG o WebP nel tuo browser con un cursore di qualità interattivo.
Regola, filtra, ruota e ritaglia foto nel browser — senza caricamenti, senza filigrana.
Crea meme e collage di screenshot con veri livelli — incolla, trascina, ritaglia, aggiungi didascalie, esporta.
Ultimo aggiornamento