Loading...
Loading...
Inserisci due immagini e rivela la differenza con un divisore trascinabile, disponile affiancate o sfuma una sopra l'altra — utile per revisioni di design, passaggi di ritocco e fotografia prima/dopo.
Un cursore di confronto immagini ti consente di sovrapporre due immagini e rivelare l'una o l'altra trascinando un divisore attraverso il frame. È lo strumento standard per qualsiasi visuale 'prima vs. dopo': passaggi di ritocco fotografico, redesign di un'interfaccia utente, due rendering della stessa scena, due gradazioni di colore dello stesso scatto, build A vs. build B di un modello 3D. La modalità affiancata mostra entrambe contemporaneamente per confronti di proporzioni. La modalità sovrapposizione sfumata sfuma tra le due con un cursore di opacità, utile per individuare sottili spostamenti di allineamento o differenze di tono che un divisore rigido nasconderebbe. Tutto avviene localmente — entrambe le immagini rimangono sul tuo dispositivo, il confronto viene eseguito nel browser e nulla viene caricato.
Trascina un file JPG, PNG, WebP, GIF, BMP o AVIF nello slot Prima, o clicca per scegliere dal tuo dispositivo. L'immagine viene visualizzata nel pannello e l'area di lavoro appare sotto.
Trascina la seconda immagine nello slot Dopo. Per i migliori risultati, entrambe le immagini dovrebbero avere le stesse dimensioni — il contenitore di confronto si blocca al rapporto d'aspetto della prima immagine che carichi.
Il cursore sovrappone le due immagini con un divisore trascinabile. Affiancate le mette in due colonne. La sovrapposizione sfumata sfuma tra di esse con un cursore di opacità — utile per individuare spostamenti di allineamento.
In modalità cursore, trascina ovunque nell'area di confronto per muovere il divisore. Cambia il divisore in verticale se le tue immagini si confrontano dall'alto verso il basso piuttosto che da sinistra a destra. In modalità sfumata, trascina il cursore di opacità dopo.
Usa Scambia per capovolgere A e B senza ricaricare. Ripristina cancella entrambe le immagini e riporta l'area di lavoro ai valori predefiniti. Carica nuovi file in qualsiasi momento trascinandoli nello slot — non è necessario ripristinare prima.
1. Entrambe le immagini vengono visualizzate con object-fit: contain all'interno di un contenitore bloccato nel rapporto d'aspetto. 2. L'immagine dopo si trova in un sovrapposto posizionato assolutamente. 3. Un clip-path CSS: inset(0 [100 - posizione]% 0 0) rivela solo il lato sinistro della sovrapposizione. 4. La modalità verticale scambia l'asse inset: clip-path: inset(0 0 [100 - posizione]% 0). 5. Gli eventi del puntatore aggiornano la posizione in base all'offset del cursore all'interno del rettangolo di delimitazione del contenitore. 6. La modalità di dissolvenza salta il clip-path e anima semplicemente l'opacità da 0 a 1 sull'immagine Dopo.
Utilizzare il clip-path mantiene entrambe le immagini a piena qualità senza ri-encoding della canvas — ciò che vedi è il file sorgente pixel per pixel, solo mascherato. La gestione del trascinamento cattura il pointermove sulla finestra in modo che il divisore continui a seguire anche se il cursore esce dall'area di confronto durante il trascinamento. Il blocco del rapporto d'aspetto significa che il contenitore si scala con la larghezza della pagina senza mai distorcere le immagini, e object-fit: contain gestisce elegantemente il caso in cui le due immagini abbiano dimensioni leggermente diverse.
Riferimento: MDN — clip-path
| Caso d'uso | Miglior modo |
|---|---|
Passaggio di ritocco fotografico (pelle, sostituzione del cielo, correzione del colore) | Slider — trascina il divisore attraverso il fotogramma per individuare esattamente dove si trovano le modifiche. Mantieni entrambi i file alle stesse dimensioni in modo che la linea del divisore rimanga significativa. |
Ridisegno del sito web — screenshot del vecchio layout vs. nuovo layout | Slider per sezioni principali, affiancate quando lo scorrimento è importante. Prendi entrambi gli screenshot alla stessa larghezza della finestra o il confronto non sarà equo. |
Due rendering della stessa scena 3D con illuminazione diversa | Sovrapposizione di dissolvenza — sfuma tra di loro per individuare sottili variazioni di GI o ombre. La modalità di dissolvenza è anche ottima per individuare dove un denoiser ha cambiato i dettagli. |
Screenshot del bug report vs. output atteso | Affiancati — gli ingegneri possono vedere entrambi contemporaneamente senza scorrere. Aggiungi lo slider sopra nel thread del problema per il momento 'rivelato'. |
Mappa o grafico con due stati di dati (marzo vs. aprile) | Slider — scorri attraverso il grafico per vedere quali regioni sono cambiate. Il divisore verticale funziona bene per le mappe geografiche che confrontano nord vs. sud. |
Ritaglia il soggetto da qualsiasi foto con AI su dispositivo — nessun upload richiesto.
Riduci le dimensioni dei file JPG, PNG o WebP nel tuo browser con un cursore di qualità interattivo.
Regola, filtra, ruota e ritaglia foto nel browser — senza caricamenti, senza filigrana.
Crea meme e collage di screenshot con veri livelli — incolla, trascina, ritaglia, aggiungi didascalie, esporta.
Ultimo aggiornamento: