Unione degli screenshot

L'unione degli screenshot combina più acquisizioni sovrapposte in un'unica immagine continua e serve quando una sola acquisizione non copre tutto il contenuto.

Related workflow terms: Screenshot con scorrimento, Screenshot di una pagina intera.

Come funziona l'unione

Si parte da due o più screenshot con contenuto sovrapposto e li si fonde in un'immagine senza interruzioni. Il processo identifica regioni di pixel corrispondenti tra immagini adiacenti e le allinea con precisione.

Nel metodo manuale, l'utente acquisisce più immagini mentre scorre la pagina e mantiene almeno il 20-30% di sovrapposizione. Il software analizza le aree comuni, riconosce elementi come righe di testo, bordi dell'interfaccia e immagini, quindi allinea le acquisizioni in verticale o orizzontale. Infine fonde i pixel sovrapposti per eliminare le giunzioni visibili.

Il metodo automatico usa lo stesso principio ma elimina l'intervento manuale. Lo strumento scorre per incrementi, acquisisce ogni posizione ed esegue l'allineamento. Il risultato è una sola immagine alta, o larga, che rappresenta tutto il contenuto.

La qualità dipende da tre fattori: sovrapposizione sufficiente, dimensioni costanti del viewport e layout statico. Se la pagina cambia tra le acquisizioni a causa di caricamento differito, animazioni o annunci dinamici, l'algoritmo potrebbe non trovare regioni corrispondenti.

Unione e acquisizione nativa a pagina intera

L'acquisizione nativa a pagina intera, disponibile nei DevTools e negli strumenti dedicati, renderizza l'intera pagina in una sola immagine senza scorrere. Accede a tutto il layout DOM ed evita i problemi di allineamento.

L'unione serve perché la modalità nativa non è sempre disponibile o affidabile. Alcune pagine hanno intestazioni fisse, barre adesive o elementi mobili visibili in ogni viewport. Il rendering nativo li gestisce in un solo passaggio; l'unione manuale deve invece evitare che compaiano ripetuti nelle varie immagini.

Quando la modalità nativa è disponibile, è quasi sempre preferibile: più rapida, precisa e priva di sovrapposizioni da gestire. L'unione resta utile in app desktop, schermi mobili o ambienti che non espongono a un'API un layout scorrevole.

Un approccio pratico è usare la pagina intera nativa per i siti web e riservare l'unione ad app, PDF e superfici mobili in cui non esiste una pagina continua accessibile al renderer. Si ottengono immagini più pulite e meno errori di allineamento.

Dove si usa

• Documentazione di app mobili — gli schermi mobili non sempre consentono una pagina intera nativa. Si acquisiscono più immagini durante lo scorrimento e le si unisce per la documentazione o le schede negli app store.
• Applicazioni meno recenti — le app desktop senza rendering del browser non dispongono del DOM. L'unione può essere l'unico modo per documentare elenchi lunghi, moduli multipagina e pannelli scorrevoli.
• Contenuti orizzontali — tabelle larghe, diagrammi di Gantt e linee temporali oltre il viewport possono essere ricostruiti da acquisizioni successive da sinistra a destra.
• Confronti — due immagini lunghe affiancate mostrano per intero due pagine, utile nelle revisioni grafiche e nei controlli di regressione.

Errori comuni

• Sovrapposizione insufficiente. Meno del 20% offre pochi dati per un allineamento preciso. Possono comparire testo spostato, giunzioni o risultati del tutto errati. Una sovrapposizione maggiore è più sicura.
• Viewport incoerente. Ridimensionare il browser o l'app tra le acquisizioni cambia il layout. Mantieni identiche larghezza del viewport e livello di zoom.
• Ignorare i contenuti dinamici. Caroselli, annunci a rotazione e immagini differite possono cambiare tra uno scatto e l'altro, causando duplicazioni o disallineamenti. Disattiva le animazioni e aspetta il caricamento completo.
• Unire quando è disponibile la pagina intera. Se lo strumento supporta il rendering nativo, usalo. L'unione aggiunge complessità e possibili difetti; riservala agli ambienti che non offrono davvero un'acquisizione continua.