Screenshot prima e dopo

Uno screenshot prima e dopo è una coppia di immagini dello stesso soggetto, una scattata prima di una modifica e una dopo. La coppia viene mostrata affiancata, impilata o come sovrapposizione con un cursore, così la differenza si vede a colpo d'occhio.

Un confronto corretto mantiene costante tutto tranne la modifica. Entrambe le immagini richiedono la stessa area di cattura, la stessa dimensione del viewport, la stessa densità di pixel, la stessa posizione di scorrimento e lo stesso stato dell'app, ad esempio lo stesso account con accesso effettuato e gli stessi dati di test. Se la seconda immagine è spostata anche di pochi pixel, anche i contenuti invariati risultano diversi in un confronto pixel per pixel.

Perché prima e dopo conta

Uno screenshot singolo mostra uno stato. Una coppia mostra un cambiamento, cioè ciò che revisori, clienti e responsabili di solito devono valutare. Registra anche com'era la schermata prima della modifica, cosa difficile da ricreare in seguito.

Dove si usano gli screenshot prima e dopo

• Note di rilascio e changelog che mostrano una schermata riprogettata.
• Segnalazioni di bug e conferme delle correzioni.
• Revisioni di design e accessibilità, ad esempio una correzione del contrasto.
• Report per i clienti sugli aggiornamenti del sito.

Come catturare coppie prima e dopo efficaci

1. Cattura prima l'immagine "prima", prima che la modifica venga rilasciata.
2. Registra le impostazioni: dimensione della finestra, area, livello di zoom, tema e dati di test.
3. Cattura l'immagine "dopo" con le stesse impostazioni.
4. Esporta entrambe nello stesso formato e presentale con etichette corrispondenti.

Per le pagine web, esegui due volte Temposhot Website Capture con lo stesso URL e le stesse impostazioni di Device e Area. Per le app desktop, usa la sorgente Custom Area in Auto Capture. Il selettore si riapre sull'area salvata, quindi la seconda cattura usa lo stesso rettangolo.

Errori comuni

• Confrontare una cattura Retina con una cattura 1x. Ogni pixel ha una dimensione diversa.
• Cambiare lo zoom del browser, il tema o la dimensione della finestra tra una cattura e l'altra.
• Dimenticare di catturare il "prima" finché la modifica non è già online.
• Ritagliare le due immagini in modo diverso.

Ripeti gli stessi screenshot più volte?

Mantieni un elenco di URL salvato in automazione degli screenshot di siti web e riesegualo prima e dopo ogni rilascio.

Domande frequenti

Per le coppie di confronto conviene JPG o PNG?

PNG. La compressione con perdita aggiunge piccole differenze che emergono nei confronti pixel per pixel.

Come trovo le differenze piccole?

Carica entrambi i file in Compare Images per evidenziare i pixel modificati.

Fonti

• Screenshot (Wikipedia)

Risorse correlate

• Opzioni di Website Capture: impostazioni di dispositivo, area e attesa.
• Sorgenti di cattura: riutilizza una Custom Area salvata.
• Stitch Screenshots: unisce due immagini in un unico file.