Nessun upload, 100% locale, nessun account

Confronto immagini

Carica due immagini e confrontale con uno slider a trascinamento o vista affiancata. Perfetto per modifiche prima/dopo. Nessun upload.

Come funziona Slider confronto immagini

Confronto immagini con cursore ti permette di caricare due immagini affiancate e trascinare un divisore verticale per rivelare più di un'immagine e meno dell'altra. Questo layout prima-e-dopo è un modo diretto e immediato per mostrare la differenza tra due versioni di un'immagine. Entrambe le immagini vengono caricate dal disco locale tramite la File API e renderizzate sullo schermo dal browser; nulla viene caricato su un server.

Il cursore usa un approccio CSS clip-path in modo che la transizione tra le due immagini sia sempre allineata ai pixel e non vi sia alcuna fusione o interpolazione al confine. Puoi anche passare a una visualizzazione a schermo diviso che mostra le due immagini in pannelli fissi a sinistra e a destra. Lo strumento è utile per confrontare modifiche alle foto, risultati di compressione, iterazioni di design o qualsiasi due immagini in cui è necessario vedere chiaramente le differenze.

Scritto da Bastien Sulyan

Come usare Slider confronto immagini, passo dopo passo

  1. Trascina la prima immagine (la versione «prima») nell'area di caricamento a sinistra.
  2. Trascina la seconda immagine (la versione «dopo») nell'area di caricamento a destra.
  3. Trascina il divisore a sinistra e a destra per rivelare più di un'immagine alla volta.
  4. Passa alla visualizzazione divisa per vedere entrambe le immagini in pannelli fissi se preferisci un confronto statico.
  5. Usa il pulsante a schermo intero per massimizzare il confronto per un'ispezione dettagliata.

Casi d'uso comuni

  • Un fotografo confronta l'esportazione RAW originale con una versione ritoccata per valutare quanto la modifica ha cambiato l'immagine.
  • Uno sviluppatore controlla una coppia di immagini compresse prima e dopo per valutare se la perdita di qualità a un dato livello di compressione è accettabile.
  • Un designer UX presenta una riprogettazione dell'interfaccia utente mettendo lo screenshot della vecchia interfaccia a sinistra e quello della nuova a destra per una revisione con i portatori di interesse.
  • Un editor di contenuti verifica che una manipolazione dell'immagine (correzione del colore, ritaglio) sia coerente tra una miniatura e una versione a dimensione intera.

Domande frequenti

Le due immagini devono avere le stesse dimensioni?

Lo strumento funziona meglio quando entrambe le immagini hanno le stesse dimensioni, perché il cursore le sovrappone esattamente. Se le immagini differiscono per dimensione, lo strumento le ridimensiona a una dimensione di visualizzazione comune. Può apparire un leggero disallineamento ai bordi se i rapporti d'aspetto sono diversi.

Le immagini vengono inviate da qualche parte perché il confronto funzioni?

No. Entrambe le immagini vengono caricate dal filesystem tramite la File API e disegnate in elementi Canvas nel browser. Il confronto è un'operazione di rendering lato client. Nessuna immagine lascia il dispositivo.

Posso confrontare immagini da due URL diversi invece che da file locali?

Lo strumento attuale accetta solo file locali. Il caricamento di immagini da URL remoti richiederebbe che il browser le recuperi e sarebbe soggetto a restrizioni CORS che molti host di immagini non permettono.

Esiste una dimensione massima dell'immagine che il confronto può gestire?

Il limite è la memoria Canvas del browser. Immagini fino a circa 20 megapixel ciascuna vengono gestite senza problemi sulla maggior parte dei dispositivi desktop. Immagini molto grandi possono rallentare il rendering o causare un errore di memoria su hardware di fascia bassa.

Posso salvare uno screenshot di una posizione specifica del cursore?

Lo strumento di screenshot del sistema operativo (o la funzione di screenshot del browser in DevTools) è il modo diretto per catturare una particolare posizione del cursore. La visualizzazione del confronto in sé non ha un pulsante di esportazione integrato per un'immagine unita.

Strumenti correlati

Mantieni tutto locale, esplora gli strumenti complementari.

Tutti gli strumenti immagini