Comparație imagini

Încărcați două imagini și comparați-le cu un glisor cu tragere sau vedere una lângă alta. Perfect pentru editări înainte/după. Fără încărcare.

Cum funcționează Glisor de comparație imagini

Image Comparison Slider vă permite să încărcați două imagini una lângă alta și să trageți un separator vertical pentru a dezvălui mai mult dintr-o imagine și mai puțin din cealaltă. Acest aspect înainte-și-după este o modalitate directă de a arăta diferența dintre două versiuni ale unei imagini. Ambele imagini sunt încărcate de pe discul local folosind File API și redate pe ecran de browser; nimic nu este încărcat pe un server.

Glisorul folosește o abordare CSS clip-path, astfel încât tranziția dintre cele două imagini este întotdeauna aliniată la pixeli și nu există amestecare sau interpolare la limită. Puteți de asemenea trece la o vedere split-screen care arată cele două imagini în panouri fixe stânga și dreapta. Unealta este utilă pentru compararea editărilor de fotografii, rezultatelor compresiei, iterațiilor de design sau oricăror două imagini în care trebuie să vedeți clar diferențele.

Scris de Bastien Sulyan

Cum se folosește Glisor de comparație imagini, pas cu pas

Trasați prima imagine (versiunea 'înainte') în zona de încărcare din stânga.
Trasați a două imagine (versiunea 'după') în zona de încărcare din dreapta.
Trageți separatorul stânga și dreapta pentru a dezvălui mai mult dintr-o imagine pe rând.
Treci la vederea split pentru a vedea ambele imagini în panouri fixe dacă preferi o comparație statica.
Folosiți butonul ecran complet pentru a maximiza comparația pentru inspectare detaliata.

Cazuri de utilizare frecvente

Un fotograf compara exportul original RAW cu o versiune retusata pentru a evalua cât de mult a schimbat editarea imaginea.
Un dezvoltator verifică o pereche de imagini comprimate înainte-și-după pentru a evalua dacă pierderea de calitate la un nivel de compresie dat este acceptabilă.
Un designer UX prezinta o reproiectare a UI plasând vechea captura de ecran a interfetei pe stânga și pe cea nouă pe dreapta pentru o revizuire a unui stakeholder.
Un editor de conținut verifică că o manipulare a imaginii (gradare de culoare, decupare) este consistentă între o miniatură și o versiune la dimensiune completă.

Întrebări frecvente

Cele două imagini trebuie să aibă aceeași dimensiune?

Unealta funcționează cel mai bine când ambele imagini au aceleași dimensiuni, deoarece glisorul le suprapune exact. Dacă imaginile diferă în dimensiune, unealta le scalează la o dimensiune de afișare comună. Unele nealinieri pot apărea la margini dacă rapoartele de aspect sunt diferite.

Sunt trimise imaginile undeva pentru ca comparația să funcționeze?

Nu. Ambele imagini sunt încărcate din sistemul de fișiere prin File API și desenate în elemente Canvas în browserul dumneavoastră. Comparația este o operațiune de randare pe partea clientului. Niciuna dintre imagini nu părăsește dispozitivul dumneavoastră.

Pot compara imagini de la două URL-uri diferite în loc de fișiere locale?

Unealta actuală accepta doar fișiere locale. Incarcarea imaginilor de la URL-uri la distanța ar necesita ca browserul să le obtina și ar fi supusa restrictiilor CORS pe care mulți gazduitori de imagini nu le permit.

Există o dimensiune maxima a imaginii pe care o poate gestiona comparația?

Limita o constituie memoria Canvas a browserului. Imaginile de până la aproximativ 20 de megapixeli fiecare sunt gestionate fără probleme pe majoritatea dispozitivelor desktop. Imaginile foarte mari pot incetini randarea sau pot cauza o eroare de memorie pe hardware de nivel scăzut.

Pot salva o captura de ecran a unei poziții specifice a glisorului?

Instrumentul de captura de ecran al sistemului de operare (sau funcția de captura de ecran a browserului în DevTools) este modalitatea directă de a captura o anumită poziție a glisorului. Vederea comparatiei în sine nu are un buton de export încorporat pentru o imagine fuzionata.

Instrumente conexe

Păstrează totul local, explorează instrumente complementare.

Toate instrumentele de imagine