Å fange en piksel som har forskjøvet seg med en halv millimeter er en oppgave enhver frontend-utvikler kjenner til. Ta skjermbilde, zoom inn i et grafikkprogram, tilbake til nettleseren, og gjenta dusinvis av ganger i timen. Når du analyserer andres layout eller prøver å forstå hvordan en nettleser gjengir et spesifikt UI-element, strekker prosessen seg over minutter.

Open Broadcaster Software (OBS) er et gratis verktøy for strømming med åpen kildekode. De fleste kjenner det som programvare for Twitch og YouTube, men OBS har en mindre åpenbar modus: en digital lupe i sanntid. Du retter opptaksområdet mot den delen av skjermen du trenger, strekker det til det fyller vinduet, og hver piksel blir synlig uten å lagre skjermbilder eller bytte mellom programmer.

Nedenfor finner du en trinnvis veiledning for å sette opp OBS som en pikselinspektør, en alternativ metode med den innebygde forstørrelsen i Windows, og en ærlig diskusjon om når denne teknikken virkelig trengs og når den er overdreven.

💡 Rask oversikt:

• Installer OBS og legg til en «Display Capture»-kilde
• Beskjær bildet til ønsket område med Alt + røde håndtak
• Strekk området til det fyller vinduet og velg «Point»-skalering
• Få en levende lupe uten utjevning, piksler vises som de er
• For én enkelt skjerm finnes et innebygd alternativ: skjermlupen i Windows

Trinn 1: Installere OBS Studio

Last ned OBS Studio fra det offisielle nettstedet. Programmet er gratis og tilgjengelig for Windows, macOS og Linux. Installasjonen er enkel: veiviseren guider deg gjennom med et par klikk. Etter oppstart ser du et svart forhåndsvisningsvindu og et panel med kilder, scener og en lydmikser.

Scener og lyd er ikke nødvendig for vår oppgave. Fokuset er utelukkende på Kilder-panelet.

Trinn 2: Opprette en «Display Capture»-kilde

I Kilder-panelet klikker du på «+» og velger Display Capture. Gi kilden et valgfritt navn og klikk «OK».

Hvis du har flere skjermer, flott: velg den der målet for forstørrelsen befinner seg. Én enkelt skjerm fungerer også, du vil bare ha mindre ledig plass til å plassere OBS.

Trinn 3: Beskjære bildet til målet ditt

Dette er det viktigste trinnet. Hold Alt og dra i de røde håndtakene som vises i kantene av forhåndsvisningen. Beskjær bildet slik at bare interesseområdet fanges opp: en knapp, et ikon, en tekstlinje, overgangen mellom to blokker.

Regelen er enkel: jo mindre opptaksområdet er, desto større blir den endelige forstørrelsen. Hvis du beskår for mye, bruk Alt + håndtak igjen for å justere.

Trinn 4: Strekke og skalere

Ta nå tak i hjørnene på forhåndsvisningen (uten å holde noen taster) og strekk bildet til det fyller hele OBS-vinduet. Høyreklikk deretter på forhåndsvisningsområdet og velg Scale Filtering → Point.

Denne innstillingen deaktiverer utjevningsalgoritmer. I «Point»-modus viser OBS piksler som de er, firkant for firkant, uten bilineær eller bikubisk interpolering. Du ser nøyaktig hva nettleseren eller applikasjonen gjengir: fargen på hver subpiksel, linjetykkelse, gradientoverganger.

Hvis du velger en annen skaleringsmodus, får du et uskarpt bilde. For pikselinspeksjon er det bare «Point» som fungerer.

Trinn 5: Arbeide med lupen

Den konfigurerte scenen fungerer i sanntid. Åpne en nettleser med layouten din, flytt vinduet, og OBS viser alle endringer øyeblikkelig uten forsinkelse. Dette er den grunnleggende forskjellen fra kjeden «skjermbilde → redigeringsprogram → sjekk»: du avbryter ikke deg selv og du mister ikke kontekst.

Dette oppsettet har én ulempe: du ofrer skjermplass. OBS tar opp en del av en skjerm eller en hel skjerm. På en stasjonær datamaskin med to skjermer er ikke dette noe problem, men på en bærbar med én enkelt skjerm føles det merkbart trangt.

Alternativ: Skjermlupen i Windows

Hvis OBS virker overdrevent for en engangs pikselkontroll, har Windows et innebygd verktøy. Trykk Win + + (pluss-tasten på numerisk tastatur eller ved siden av Backspace) for å starte skjermlupen.

Som standard viser den et forstørret område i fullskjermmodus. Bytt til forankret vindusmodus med Ctrl + Alt + D, så vises et flytende panel du kan flytte og endre størrelse på.

Windows-lupen jevner ut piksler som standard. Åpne lupeinnstillingene (tannhjulikonet i panelet) og fjern avhakingen for Jevn ut kanter på bilder og tekst. Etter dette blir bildet ærlig, uten interpolering.

Fordelen med Windows-lupen: ingen installasjon nødvendig, fungerer umiddelbart. Ulempen: mindre fleksibilitet i visningsområdets størrelse og ingen modus for «hele vinduet = hele lupen» slik som i OBS.

Hvorfor undersøke piksler under lupe

I praksis bruker vi denne teknikken under layoutarbeid og designgjennomgang, spesielt når vi trenger å sjekke hvordan nettleseren gjengir et spesifikt element. Et ikon på retina ser annerledes ut enn på en standard skjerm. En gradient kan gi bånding. Subpikselutjevning av tekst er forskjellig mellom Windows og macOS. Uten levende forstørrelse er ikke disse nyansene synlige.

Med utbredelsen av høyoppløselige skjermer og standard skjermskalering i Windows har kampen for skarpe linjer flyttet seg til et nytt nivå. Det som ser perfekt ut på 4K kan forskyve seg med en halv piksel på Full HD ved 125% skalering.

I VFX-bransjen finnes begrepet «fucking pixel» for situasjoner der en artist henger seg opp i en enkelt piksel på bekostning av helhetsbildet. Analogien er treffende: det er en fin linje mellom detaljfokus og perfeksjonisme. Pixar på SIGGRAPH snakket om subsurface scattering, en teknologi som gir liv til animerte figurer. De fleste seere legger ikke merke til forskjellen. Men den forskjellen er nettopp det som skiller «bra» fra «fremragende».

Webdesign fungerer på samme måte: en besøkende vil ikke si «den pikselen ble gjengitt feil». Men den generelle kvalitetsfølelsen bygges av slike små ting. OBS-lupen er en rask måte å kontrollere disse detaljene på.

Hele prosessen fra installasjon til skalering vises tydelig i denne videoen:

⁉️🤔 Ofte stilte spørsmål

OBS hakker under skalering, hva bør jeg gjøre?

Sjekk utdatainnstillingene: Settings → Video. For pikselinspeksjon trenger du ikke 60 FPS; sett det til 30 eller til og med 15. Hold grunnlerretsoppløsningen lik skjermoppløsningen din. Hvis det hakker på integrert grafikk, bytt renderer til Direct3D 12 i Settings → Advanced → Video Renderer.

Kan jeg klare meg uten en ekstra skjerm?

Ja, men skjermplassen blir trang. Et tips: minimer alle unødvendige vinduer, la nettleseren med layouten din og OBS stå side om side. På en bærbar med Full HD-skjerm kan du realistisk plassere OBS på en tredjedels skjermbredde, noe som er nok for stikkprøver. Hvis det ikke er nok, bytt til Windows-lupen via Win + +.

Finnes det et tilsvarende verktøy for macOS?

OBS fungerer på macOS på nøyaktig samme måte, med skjermopptak via Display Capture eller Window Capture. «Point»-skalering heter Point der (samme filter i forhåndsvisningens kontekstmeny). Den innebygde macOS-lupen er Option + Cmd + 8, men den tilbyr ikke den samme beskjæringsfleksibiliteten som OBS.

Hvordan sjekker jeg en spesifikk piksel i kode?

I nettleserens DevTools åpner du elementinspektøren og holder musepekeren over den aktuelle noden. Nettleseren vil utheve den på siden. Se samtidig på OBS-vinduet; det forstørrede området vil vise hver piksel av kanten, utfyllingen og bakgrunnen. Kombinasjonen OBS + DevTools dekker de aller fleste pikselperfekte layoutoppgaver.

Kantutjevning av tekst er forskjellig mellom nettlesere. Vil OBS hjelpe meg å se dette?

Ja, det er nettopp dette denne teknikken er nyttig for. Åpne samme layout i Chrome og Firefox, rett OBS mot samme tekstblokk, og forskjellen i subpikselgjengivelse er synlig med det blotte øye. Det er spesielt merkbart med tynne fonter (vekt 300) og lys tekst på mørk bakgrunn.

Hva en piksellupe gir i praksis

Denne teknikken er ikke for hver eneste mockup. For en landingsside med fem blokker er DevTools nok. Men hvis du bygger et designsystem, feilsøker mikroanimasjoner eller finpusser et grensesnitt som tusenvis av brukere vil se, vil 10 minutter med OBS-lupen spare timer med diskusjoner med en designer om «hvorfor det ikke ser riktig ut».

Begynn i det små: åpne ditt nåværende prosjekt, fang opp en seksjon med et ikon og tekst, aktiver «Point»-skalering. Hvis du er fornøyd med det du ser, flott. Hvis ikke, har du nettopp funnet noe du kan fikse på fem minutter.

Hvilket verktøy bruker du for å sjekke piksler under layoutarbeid: en lupe, skjermbilder, eller stoler du på nettleserinspektøren? Fortell oss i kommentarfeltet.