Ingen upload, 100% lokalt, ingen konto

Billedsammenligning

Indlæs to billeder og sammenlign dem med en trækskyder eller side om side. Perfekt til før/efter-redigeringer. Ingen upload.

Sådan virker Billedsammenligning med skyder

Billedsammenligningsskyder lader dig indlæse to billeder side om side og trække en lodret skillelinje for at afsløre mere af det ene billede og mindre af det andet. Dette før-og-efter-layout er en direkte, lav-friktions måde at vise forskellen mellem to versioner af et billede. Begge billeder indlæses fra din lokale disk ved hjælp af File API og gengives på skærmen af browseren; intet uploades til en server.

Skyderen bruger en CSS clip-path-tilgang, så overgangen mellem de to billeder altid er pixel-justeret, og der er ingen blanding eller interpolation ved grænsen. Du kan også skifte til en delt-skærm-visning, der viser de to billeder i faste venstre og højre paneler. Værktøjet er nyttigt til at sammenligne fotoredigeringer, komprimeringsresultater, designiterationer eller to billeder, hvor du skal se forskelle tydeligt.

Skrevet af Bastien Sulyan

Sådan bruger du Billedsammenligning med skyder, trin for trin

  1. Slip det første billede (»Før«-versionen) på det venstre upload-område.
  2. Slip det andet billede (»Efter«-versionen) på det højre upload-område.
  3. Træk skillelinjen til venstre og højre for at afsløre mere af et billede ad gangen.
  4. Skift til delt visning for at se begge billeder i faste paneler, hvis du foretrækker en statisk sammenligning.
  5. Brug fuldskærmsknappen til at maksimere sammenligningen for detaljeret inspektion.

Almindelige anvendelser

  • En fotograf sammenligner den originale RAW-eksport med en retoucheret version for at evaluere, hvor meget redigeringen ændrede billedet.
  • En udvikler kontrollerer et par komprimerede billeder for at vurdere, om kvalitetstabet ved et givent komprimeringsniveau er acceptabelt.
  • En UX-designer præsenterer et UI-redesign ved at placere det gamle interface-skærmbillede til venstre og det nye til højre til en interessent-gennemgang.
  • En indholdeditor verificerer, at en billedmanipulation (farvekorrektion, beskæring) er konsistent mellem en thumbnail og en fuldstørrelse version.

Ofte stillede spørgsmål

Skal de to billeder have samme størrelse?

Værktøjet fungerer bedst, når begge billeder har de samme dimensioner, fordi skyderen overlapper dem præcist. Hvis billederne er af forskellig størrelse, skalerer værktøjet dem til en fælles visningsstørrelse. Noget fejljustering kan forekomme ved kanterne, hvis billedforholdene er forskellige.

Sendes billederne nogen steder for at sammenligningen kan fungere?

Nej. Begge billeder indlæses fra dit filsystem via File API og tegnes i Canvas-elementer i din browser. Sammenligningen er en klient-side gengivelsesoperation. Ingen af billederne forlader din enhed.

Kan jeg sammenligne billeder fra to forskellige URL'er frem for lokale filer?

Det nuværende værktøj accepterer kun lokale filer. Indlæsning af billeder fra fjern-URL'er ville kræve, at browseren henter dem og ville være underlagt CORS-begrænsninger, som mange billedværter ikke tillader.

Er der en maksimal billedstørrelse, som sammenligningen kan håndtere?

Grænsen er din browsers Canvas-hukommelse. Billeder op til ca. 20 megapixels håndteres uden problemer på de fleste stationære enheder. Meget store billeder kan forsinke gengivelsen eller forårsage en hukommelsesfejl på lavt-ende hardware.

Kan jeg gemme et skærmbillede af en bestemt skyderposition?

Dit operativsystems skærmbilledeværktøj (eller browserens skærmbilledefunktion i DevTools) er den enkle måde at fange en bestemt skyderposition. Sammenligningsvisningen selv har ikke en indbygget eksportknap til et sammenlagt billede.

Relaterede værktøjer

Hold alt lokalt, udforsk komplementære værktøjer.

Alle billedværktøjer