Bildjämförelse

Ladda två bilder och jämför dem med ett dragreglage eller sida vid sida-vy. Perfekt för före/efter-redigeringar. Ingen uppladdning.

Så fungerar Bildj ämförelsereglage

Bildjämförelseresglaget låter dig ladda två bilder sida vid sida och dra en vertikal delare för att avslöja mer av en bild och mindre av den andra. Denna före-och-efter-layout är ett direkt och friktionsfritt sätt att visa skillnaden mellan två versioner av en bild. Båda bilderna laddas från din lokala disk med File API och renderas på skärmen av webbläsaren; ingenting laddas upp till en server.

Reglaget använder en CSS clip-path-metod så att övergången mellan de två bilderna alltid är pixeljusterad och det sker ingen blandning eller interpolation vid gränsen. Du kan också byta till en delad skärmvy som visar de två bilderna i fasta vänster- och högerpaneler. Verktyget är användbart för att jämföra fotoredigering, komprimeringsresultat, designiterationer eller vilka som helst två bilder där du behöver se skillnader tydligt.

Skrivet av Bastien Sulyan

Så här använder du Bildj ämförelsereglage, steg för steg

Släpp den första bilden ('före'-versionen) i det vänstra uppladdningsområdet.
Släpp den andra bilden ('efter'-versionen) i det högra uppladdningsområdet.
Dra delaren åt vänster och höger för att avslöja mer av en bild i taget.
Byt till delad vy för att se båda bilderna i fasta paneler om du föredrar en statisk jämförelse.
Använd helskärmsknappen för att maximera jämförelsen för detaljerad inspektion.

Vanliga användningsområden

En fotograf jämför den ursprungliga RAW-exporten med en retuscherad version för att utvärdera hur mycket redigeringen förändrade bilden.
En utvecklare kontrollerar ett par komprimerade bilder för att bedöma om kvalitetsförlusten vid en given komprimeringsnivå är acceptabel.
En UX-designer presenterar en UI-redesign genom att placera den gamla gränssnittsskärmdumpen till vänster och den nya till höger för en intressentgranskning.
En innehållsredaktör verifierar att en bildmanipulation (färggradering, beskärning) är konsekvent mellan en miniatyrbild och en fullstorleksversion.

Vanliga frågor

Behöver de två bilderna ha samma storlek?

Verktyget fungerar bäst när båda bilderna har samma dimensioner, eftersom reglaget lägger dem exakt ovanpå varandra. Om bilderna skiljer sig i storlek skalar verktyget dem till en gemensam visningsstorlek. Viss feljustering kan uppstå vid kanterna om bildförhållandena är olika.

Skickas bilderna någonstans för att jämförelsen ska fungera?

Nej. Båda bilderna laddas från ditt filsystem via File API och ritas i Canvas-element i din webbläsare. Jämförelsen är en rendering på klientsidan. Ingen av bilderna lämnar din enhet.

Kan jag jämföra bilder från två olika URL:er snarare än lokala filer?

Det aktuella verktyget accepterar bara lokala filer. Att ladda bilder från fjärr-URL:er skulle kräva att webbläsaren hämtar dem och skulle vara föremål för CORS-begränsningar som många bildvärdar inte tillåter.

Finns det en maximal bildstorlek som jämförelsen kan hantera?

Begränsningen är din webbläsares Canvas-minne. Bilder upp till ungefär 20 megapixlar vardera hanteras utan problem på de flesta stationära enheter. Mycket stora bilder kan sakta ner renderingen eller orsaka ett minnesfel på lågprestanda-hårdvara.

Kan jag spara en skärmbild av en specifik reglagepositon?

Operativsystemets skärmbildsverktyg (eller webbläsarens skärmbildsfunktion i DevTools) är det enkla sättet att fånga en viss reglagepositon. Jämförelsevyn själv har ingen inbyggd exportknapp för en sammanfogad bild.

Relaterade verktyg

Håll allt lokalt, utforska kompletterande verktyg.

Alla bildverktyg