Slider di confronto immagini

Come funziona lo slider di confronto immagini

Cosa fa lo strumento

Lo slider di confronto immagini sovrappone due immagini e mostra solo la parte che vuoi vedere trascinando una maniglia verticale. Spostandoti a sinistra e a destra, viene rivelata una porzione maggiore dell’immagine "prima" o "dopo", rendendo immediatamente evidenti le differenze visive affiancate. Vengono mostrati anche le dimensioni del file e la variazione percentuale, così puoi vedere anche l’impatto a livello di byte.

Casi d’uso comuni per sviluppatori

Gli ingegneri che verificano la compressione con perdita confrontano una versione JPEG con una WebP della stessa sorgente. I designer esaminano le modifiche di tone-mapping, ritocco o correzione del colore tra una bozza e la versione finale. Gli ingegneri ML/AI visualizzano i risultati di super-risoluzione, rimozione del rumore o trasferimento di stile rispetto agli input. I team marketing realizzano demo "prima/dopo" d’impatto per le landing page.

Formati, tipi o varianti dei dati

Accetta qualsiasi formato immagine che il browser possa renderizzare — PNG, JPEG, WebP, AVIF, GIF, SVG. Le immagini restano nel tuo browser tramite object URL (URL.createObjectURL), quindi non viene caricato nulla. Per un confronto davvero utile, le due immagini dovrebbero avere dimensioni e rapporto d'aspetto corrispondenti; se differiscono, entrambe vengono renderizzate con object-fit: contain così che nessuna venga ritagliata.

Errori comuni e casi limite

Confrontare immagini con rapporti d'aspetto diversi produce barre letterbox su un lato. Immagini molto grandi (>50 MB) possono rallentare l'interazione di trascinamento nei browser più vecchi. Lo slider mostra l'intera immagine "dopo" — se entrambi i file hanno trasparenza, posiziona lo slider su un'area opaca oppure vedrai lo sfondo della pagina trasparire in entrambi i pannelli.

Quando usare questo strumento rispetto al codice

Usa lo strumento del browser per confronti ad hoc durante lo sviluppo o per demo rapide agli stakeholder. Nei siti web in produzione, integra librerie dedicate come react-compare-slider o img-comparison-slider per accessibilità, lazy loading e supporto SSR; per controlli di qualità automatizzati in batch su centinaia di immagini, usa strumenti basati su SSIM/PSNR come ImageMagick `compare` o pixelmatch.