Blog

Come creare un'immagine di confronto prima e dopo

Pubblicato 25 ottobre 2026 · prima e dopo, confronto, unione, flusso di lavoro

Un'immagine batte due allegati: cattura i due stati alla stessa dimensione, uniscili affiancati, aggiungi le etichette e invia un confronto che si legge a colpo d'occhio.

Gli screenshot prima e dopo sono il modo più veloce per mostrare un cambiamento, ma due allegati separati costringono chi legge a passare avanti e indietro e a ricordare cosa ha visto. Un'unica immagine affiancata elimina quel lavoro.

Cattura i due stati allo stesso modo

Il confronto è onesto solo se le due immagini sono confrontabili:

• Stesso viewport e zoom. Un "prima" al 100% e un "dopo" all'80% fanno mentire spaziature e dimensioni del testo.
• Stesso ritaglio. Cattura la stessa regione, non un ritaglio più stretto della parte cambiata.
• Stessa dimensione della finestra e stesso tema. Un "dopo" in modalità scura accanto a un "prima" in modalità chiara confronta due cambiamenti insieme.
• Stesso stato. Se la pagina ha effetti di hover o focus, tieni il puntatore fuori da entrambe le catture.

Per i layout responsive, crea una coppia per ogni breakpoint invece di mescolare larghezze.

Ritaglia allo stesso rapporto d'aspetto

Apri la prima cattura nell'editor di immagini di InSnap e ritagliala sulla regione che vuoi confrontare. Applica lo stesso ritaglio alla seconda immagine, usando l'etichetta delle dimensioni per mantenere i pixel allineati. Se i layout differiscono in altezza, ritaglia su quello più corto invece di riempire con spazio vuoto.

Uniscile affiancate

Il pannello Unione dell'editor di immagini mette più immagini su una tela (Pro):

1. Scegli Unione nella barra laterale sinistra.
2. Importa l'immagine "prima", poi quella "dopo".
3. Trascinale nell'ordine giusto e allinea le sommità.
4. Lascia uno spazio coerente tra loro; qualche pixel di margine si legge come una coppia voluta.
5. Unisci quando la disposizione è giusta, poi aggiungi le etichette.

Se le due immagini hanno dimensioni diverse, ridimensiona quella più grande per adattarla, oppure ritaglia entrambe allo stesso rapporto d'aspetto prima di unirle. Una scala diversa è il motivo più comune per cui un confronto "sembra sbagliato".

Etichetta i lati, non ogni dettaglio

Usa Testo per aggiungere "Prima" e "Dopo" — o "Attuale" e "Proposto" — nello stesso angolo di ciascun lato. Tieni le etichette brevi e identiche nello stile.

Poi annota solo le differenze che contano:

• Numeri se ci sono più cambiamenti: 1 per la spaziatura, 2 per il nuovo pulsante.
• Forme per contornare la regione cambiata.
• Frecce solo quando la direzione non è ovvia.
• Oscuramento per nomi, email e URL interni in entrambe le immagini.

Non annotare lo stesso dettaglio su entrambi i lati; segnalo una volta, sul lato in cui è cambiato.

Esporta per la destinazione

• Chat o email: un singolo PNG è il più facile da leggere e sopravvive alla maggior parte dei client.
• Slide: adatta il rapporto d'aspetto della presentazione e usa uno sfondo se le immagini sono scure.
• Documentazione: una larghezza coerente per ogni immagine di confronto della serie.

Se il file è grande, ridimensiona la cattura Retina a 1x al salvataggio; un confronto di solito non ha bisogno della densità di pixel piena.

Una checklist per il confronto

Domande frequenti

Serve Pro per unire due screenshot?

Sì, l'unione è una funzione Pro. Un'alternativa gratuita è fissare i due screenshot affiancati sullo schermo per un confronto personale, ma l'immagine unica esportata richiede il pannello Unione dell'editor.

E se i due screenshot hanno dimensioni diverse?

Ritaglia entrambi allo stesso rapporto d'aspetto, oppure ridimensiona l'immagine più grande per adattarla a quella più piccola prima di unirle. Mantenere la scala identica conta più che conservare ogni pixel.

Posso confrontare tre versioni?

Sì. Uniscile in ordine — per esempio vecchia, attuale e proposta — con lo stesso spazio e lo stesso stile di etichetta. Se le differenze sono sottili, una coppia di immagini per cambiamento è più facile da leggere di una striscia larga.

Altro dal blog