Ingen opplasting, 100% lokalt, ingen konto

Bildesammenligning

Last inn to bilder og sammenlign dem med en dra-glidebryter eller side-om-side-visning. Perfekt for før/etter-redigeringer. Ingen opplasting.

Slik fungerer Bildesammenligningsglidebryteren

Bildesammenligningsglidebryteren lar deg laste to bilder side om side og dra en vertikal skillelinje for å avdekke mer av ett bilde og mindre av det andre. Dette før-og-etter-oppsettet er en direkte, lavfriksjons måte å vise forskjellen mellom to versjoner av et bilde. Begge bildene lastes fra din lokale disk ved hjelp av File API og gjengis på skjermen av nettleseren; ingenting lastes opp til en server.

Glidebryteren bruker en CSS clip-path-tilnærming slik at overgangen mellom de to bildene alltid er pikseljonert og det ikke er noen blanding eller interpolering ved grensen. Du kan også bytte til en delt visning som viser de to bildene i faste venstre og høyre paneler. Verktøyet er nyttig for å sammenligne fotoredigeringer, komprimeringsresultater, designiterasjoner eller to bilder der du trenger å se forskjeller tydelig.

Skrevet av Bastien Sulyan

Slik bruker du Bildesammenligningsglidebryteren, steg for steg

  1. Slipp det første bildet (versjon «før») på det venstre opplastingsområdet.
  2. Slipp det andre bildet (versjon «etter») på det høyre opplastingsområdet.
  3. Dra skillelinjen til venstre og høyre for å avdekke mer av ett bilde om gangen.
  4. Bytt til delt visning for å se begge bildene i faste paneler hvis du foretrekker en statisk sammenligning.
  5. Bruk fullskjermknappen for å maksimere sammenligningen for detaljert inspeksjon.

Vanlige bruksområder

  • En fotograf sammenligner den originale RAW-eksporten med en retusjert versjon for å vurdere hvor mye redigeringen endret bildet.
  • En utvikler sjekker et før-og-etter-par med komprimerte bilder for å vurdere om kvalitetstap ved et gitt komprimeringsnivå er akseptabelt.
  • En UX-designer presenterer en UI-redesign ved å plassere det gamle grensesnittskjermbildet til venstre og det nye til høyre for en interessentgjennomgang.
  • En innholdsredaktør verifiserer at en bildebehandling (fargegradering, beskjæring) er konsistent mellom et miniatyrbilde og en fullstørrelseversjon.

Ofte stilte spørsmål

Må de to bildene ha samme størrelse?

Verktøyet fungerer best når begge bilder har samme dimensjoner, fordi glidebryteren legger dem nøyaktig oppå hverandre. Hvis bildene er ulike i størrelse, skalerer verktøyet dem til en felles visningsstørrelse. Noe feiljustering kan vises ved kantene hvis størrelsesforholdene er forskjellige.

Sendes bildene noe sted for at sammenligningen skal fungere?

Nei. Begge bildene lastes fra filsystemet ditt via File API og tegnes inn i Canvas-elementer i nettleseren din. Sammenligningen er en klientside-gjengivelsesoperasjon. Ingen av bildene forlater enheten din.

Kan jeg sammenligne bilder fra to forskjellige URL-er i stedet for lokale filer?

Det gjeldende verktøyet godtar bare lokale filer. Lasting av bilder fra eksterne URL-er ville kreve at nettleseren henter dem og ville være underlagt CORS-begrensninger som mange bildeverter ikke tillater.

Er det en maksimal bildestørrelse som sammenligningen kan håndtere?

Grensen er nettleserens Canvas-minne. Bilder opp til rundt 20 megapiksler hver håndteres uten problemer på de fleste stasjonære enheter. Svært store bilder kan bremse gjengivelsen eller forårsake en minnefeil på lavklasse-maskinvare.

Kan jeg lagre et skjermbilde av en bestemt glidebryterposisjon?

Operativsystemets skjermbildeverktøy (eller nettleserens skjermbildefunksjon i DevTools) er den enkle måten å fange en bestemt glidebryter-posisjon. Sammenligningsvisningen har ikke en innebygd eksportknapp for et sammenslått bilde.

Relaterte verktøy

Hold alt lokalt, utforsk komplementære verktøy.

Alle bildeverktøy