Scarto di un pixel
d = max(|ΔR|, |ΔG|, |ΔB|, |ΔA|) > 32
Il pixel è contato come diverso quando lo scarto di canale più grande supera 32 su 255.
Comparatore di immagini
Carica due immagini: confrontale con il cursore o affiancate, oppure mostra in rosso i pixel modificati con la loro percentuale, in locale.
Immagine
Nessuna immagine caricata
Trascina qui un’immagine
Aggiungi esattamente due immagini da confrontare. Puoi selezionarle insieme o aggiungere la seconda dopo la prima.
Ti servono più opzioni?
Usa più strumenti di modifica in un unico spazio, con il file aperto e le modifiche in corso.
Apri l’editor completoElaborazione…0 %
Questo strumento ti è stato utile?
Come funziona questo strumento?
Due versioni della stessa immagine si somigliano spesso al punto da non vedere più che cosa è cambiato: un mockup corretto, uno screenshot prima e dopo un aggiornamento, una foto ritoccata o ricompressa. Questo strumento le mostra con un cursore prima/dopo, affiancate, oppure evidenzia in rosso i pixel diversi con la loro percentuale, senza caricare le immagini.
Aggiungi esattamente due immagini PNG, JPEG o WebP, selezionandole insieme o una dopo l’altra; la prima diventa «Prima», la seconda «Dopo». Prima / dopo sovrappone le due immagini con una separazione verticale da trascinare, mentre Affiancate le mette a sinistra e a destra. Lo zoom aiuta a controllare i dettagli.
Differenze confronta le due immagini pixel per pixel. Un pixel viene segnato in rosso quando uno dei suoi canali (rosso, verde, blu o trasparenza) si discosta di più di 32 livelli su 255; gli altri pixel sono mostrati in grigio chiaro a partire dalla prima immagine, per conservare il contesto. La soglia evita di segnalare il rumore della compressione JPEG.
Il risultato indica la percentuale e il numero di pixel diversi. Se le due immagini non hanno la stessa dimensione, la seconda viene portata a quella della prima prima del calcolo e un messaggio lo segnala. Fai di nuovo clic su Differenze o su un’altra vista per tornare alle immagini.
Come usare questo strumento
Aggiungi le due immagini
Seleziona l’originale e poi la versione modificata, insieme o una dopo l’altra.
Scegli la vista
Prima / dopo per il cursore, Affiancate, oppure Differenze per evidenziare i pixel cambiati.
Controlla gli scarti
Ingrandisci le zone segnalate e leggi la percentuale di pixel diversi.
Rilevamento delle differenze
Ogni pixel della seconda immagine è confrontato con il pixel nella stessa posizione della prima.
Quota di pixel diversi
p = n_diff ÷ (W × H) × 100
Calcolata alla dimensione della prima immagine.
- ΔR, ΔG, ΔB, ΔA
- scarti dei canali rosso, verde, blu e alfa tra le due immagini
- n_diff
- numero di pixel segnati in rosso
- W, H
- larghezza e altezza della prima immagine
Casi d’uso
Rileggere un mockup corretto
Individua subito che cosa si è spostato tra due versioni di una schermata o di un progetto.
Verificare una regressione visiva
Confronta uno screenshot prima e dopo un aggiornamento per trovare il pulsante o il testo modificato.
Valutare un ritocco o una compressione
Guarda con il cursore se una foto ottimizzata ha perso dettagli rispetto all’originale.
Esempi
Pulsante modificato in uno screenshot
200 × 50 = 10.000 pixel modificati su 1.280 × 720 = 921.600, cioè l’1,09 %. Il resto dello schermo appare in grigio chiaro.
Input
Due screenshot da 1.280 × 720 px; cambia colore solo un pulsante da 200 × 50 pxRisultato
Vista Differenze: il pulsante appare in rosso; «Il 1,09 % dei pixel è diverso (10.000 su 921.600)»Due immagini di dimensioni diverse
Il rapporto 16:9 è lo stesso, quindi nulla viene deformato; i contorni possono però apparire in rosso per l’ammorbidimento dell’ingrandimento.
Input
Originale da 1.920 × 1.080 px e un’esportazione da 1.280 × 720 pxRisultato
La seconda immagine viene portata a 1.920 × 1.080 px prima del confronto, con un messaggio che lo segnalaConsigli e buone pratiche
- Metti sempre l’originale per primo: la vista Differenze usa la sua dimensione e i suoi grigi come sfondo.
- Per confrontare due esportazioni, mantieni le stesse dimensioni: un cambio di scala crea scarti lungo tutti i contorni.
- Usa il cursore Prima / dopo per valutare un ritocco di colore e Differenze per trovare una modifica localizzata.
- Una piccola percentuale su una foto ricompressa in JPEG è normale: la compressione modifica leggermente migliaia di pixel.
Fonti e riferimenti
- Canvas API (si apre in una nuova scheda), MDN Web DocsPagina in inglese
Domande frequenti
Quante immagini posso confrontare?
Esattamente due. Se ne selezioni una sola, lo strumento attende la seconda; con più di due ti chiede di ricominciare.
Come vengono rilevate le differenze?
Ogni pixel è confrontato con quello nella stessa posizione dell’altra immagine. Viene segnato in rosso se il canale rosso, verde, blu o alfa differisce di più di 32 su 255.
Le immagini devono avere la stessa dimensione?
No, ma è preferibile. La seconda viene portata alla dimensione della prima; se le proporzioni sono diverse, viene deformata e molti pixel appariranno diversi.
Posso regolare la sensibilità?
Non in questa versione: la soglia è fissata a 32 livelli, sufficiente a ignorare il rumore di compressione e a rilevare un cambio di colore o di testo.
Posso scaricare l’immagine delle differenze?
No, lo strumento serve al controllo a schermo. Fai uno screenshot della vista Differenze se devi condividerla.
Le mie immagini vengono caricate su un server?
No. Visualizzazione e calcolo delle differenze avvengono nel tuo browser.
Strumenti correlati
Continua con questi strumenti
Strumenti simili o complementari a questo.
Strumenti simili
Ritaglia, ridimensiona, aggiungi testo o filigrane, applica effetti e ottimizza un’immagine in un unico editor.
Immagini e graficaIn evidenzaUsa questo strumento
Alleggerisci un’immagine regolando la qualità o puntando a un peso in KB, con il peso finale mostrato prima del download.
Immagini e graficaIn evidenzaUsa questo strumento
Converti un’immagine in PNG, JPEG o WebP e regola la qualità prima del download.
Immagini e graficaIn evidenzaUsa questo strumento
Leggi anche
TutorialBuone pratichePrincipiante
Come comprimere un’immagine senza perdere qualità?
Riduci il peso di un’immagine scegliendo dimensioni, formato e qualità adeguati senza introdurre degradazioni visive inutili.
31 agosto 20263 min
GuidaBuone praticheIntermedio
Immagini responsive: capire srcset e sizes
Scopri come srcset e sizes consentono al browser di scegliere un’immagine adatta alla larghezza di visualizzazione, alla densità di pixel e al contesto responsive.
31 agosto 20264 min
GuidaBuone pratichePrincipiante
Metadati delle immagini: leggerli, conservarli o rimuoverli
Scopri quali metadati possono essere inclusi in un’immagine, a cosa servono e quando conservarli o rimuoverli prima della condivisione.
31 agosto 20263 min
GuidaBuone pratichePrincipiante
Come ottimizzare 50 immagini per il Web in un unico flusso
Ridimensiona un gruppo di immagini, convertile in WebP e rimuovi i metadati con una Pipeline riutilizzabile, senza trattare ogni file separatamente.
6 settembre 20263 min