Att fånga en pixel som har förskjutits en halv millimeter är en uppgift som varje frontend-utvecklare känner igen. Skärmdump, zooma i ett grafikprogram, tillbaka till webbläsaren, och upprepa dussintals gånger i timmen. När du analyserar någon annans layout eller försöker lista ut hur en webbläsare renderar ett specifikt UI-element, drar processen ut på tiden i minuter.

Open Broadcaster Software (OBS) är ett gratis verktyg för streaming med öppen källkod. De flesta känner till det som programvara för Twitch och YouTube, men OBS har ett mindre uppenbart läge: ett digitalt förstoringsglas i realtid. Du riktar infångningsytan mot den del av skärmen du behöver, sträcker ut den så att den fyller fönstret, och varje pixel blir synlig utan att du behöver spara skärmdumpar eller växla mellan program.

Nedan hittar du steg-för-steg-instruktioner för att ställa in OBS som en pixelinspektör, en alternativ metod med det inbyggda förstoringsglaset i Windows, och en ärlig diskussion om när den här tekniken verkligen behövs och när den är overkill.

💡 Snabb översikt:

• Installera OBS och lägg till en källa för "Skärminspelning"
• Beskär bilden till önskat område med Alt + röda handtag
• Sträck ut området så att det fyller fönstret och välj skalning "Point"
• Få ett live-förstoringsglas utan utjämning, pixlar visas som de är
• För en ensam skärm finns ett inbyggt alternativ: skärmförstoringsglaset i Windows

Steg 1: Installera OBS Studio

Ladda ner OBS Studio från den officiella webbplatsen. Programmet är gratis och tillgängligt för Windows, macOS och Linux. Installationen är enkel: guiden leder dig genom processen med ett par klick. Efter start ser du ett svart förhandsgranskningsfönster och en panel med källor, scener och en ljudmixer.

Scener och ljud behövs inte för vår uppgift. Fokus ligger helt på panelen Källor.

Steg 2: Skapa en källa för "Skärminspelning"

I panelen Källor, klicka på "+" och välj Skärminspelning. Ge källan valfritt namn och klicka på "OK".

Om du har flera skärmar, toppen: välj den där ditt mål för förstoring finns. En ensam skärm fungerar också, du har bara mindre ledigt utrymme att placera OBS på.

Steg 3: Beskära bilden till ditt mål

Det här är det avgörande steget. Håll ner Alt och dra i de röda handtagen som visas i kanterna av förhandsgranskningen. Beskär bilden så att endast det intressanta området fångas in: en knapp, en ikon, en textrad, skarven mellan två block.

Regeln är enkel: ju mindre infångningsområde, desto större blir den slutliga förstoringen. Om du beskärde för mycket, använd Alt + handtag igen för att justera.

Steg 4: Sträcka ut och skala

Ta nu tag i hörnen på förhandsgranskningen (utan att hålla ner några tangenter) och sträck ut bilden så att den fyller hela OBS-fönstret. Högerklicka därefter på förhandsgranskningsytan och välj Skalfiltrering → Point.

Den här inställningen inaktiverar utjämningsalgoritmer. I läget "Point" visar OBS pixlarna som de är, ruta för ruta, utan bilinjär eller bikubisk interpolering. Du ser exakt vad webbläsaren eller applikationen renderar: färgen på varje subpixel, linjetjocklek, gradientövergångar.

Om du väljer något annat skalningsläge får du en suddig bild. För pixelinspektion fungerar endast "Point".

Steg 5: Arbeta med förstoringsglaset

Den konfigurerade scenen fungerar i realtid. Öppna en webbläsare med din layout, flytta fönstret, och OBS visar alla ändringar omedelbart utan fördröjning. Det här är den grundläggande skillnaden mot kedjan "skärmdump → redigerare → kontrollera": du avbryter inte dig själv och du tappar inte sammanhanget.

Den här inställningen har en nackdel: du offrar skärmutrymme. OBS tar upp en del av en skärm eller en hel skärm. På en stationär dator med två skärmar är detta inget problem, men på en bärbar dator med en enda skärm känns det märkbart trångt.

Alternativ: Skärmförstoringsglaset i Windows

Om OBS känns överdrivet för en engångskontroll av pixlar har Windows ett inbyggt verktyg. Tryck på Win + + (plustangenten på det numeriska tangentbordet eller bredvid Backsteg) för att starta skärmförstoringsglaset.

Som standard visas ett förstorat område i helskärmsläge. Växla till dockat fönsterläge med Ctrl + Alt + D, så visas en flytande panel som du kan flytta och ändra storlek på.

Windows förstoringsglas utjämnar pixlar som standard. Öppna förstoringsglasets inställningar (kugghjulsikonen i panelen) och avmarkera Jämna till kanter på bilder och text. Efter detta blir bilden ärlig, utan interpolering.

Fördelen med Windows förstoringsglas: ingen installation krävs, fungerar direkt. Nackdelen: mindre flexibilitet i storleken på visningsområdet och inget läge "hela fönstret = hela förstoringsglaset" som i OBS.

Varför granska pixlar under förstoringsglas

I praktiken använder vi den här tekniken under layoutarbete och designgranskning, särskilt när vi behöver kontrollera hur webbläsaren renderar ett specifikt element. En ikon på retina ser annorlunda ut än på en vanlig skärm. En gradient kan ge bandning. Subpixel-textutjämning skiljer sig mellan Windows och macOS. Utan live-förstoring är dessa nyanser inte synliga.

Med spridningen av högupplösta skärmar och standardskalning av bildskärmen i Windows har kampen för knivskarpa linjer nått en ny nivå. Det som ser perfekt ut på 4K kan förskjutas en halv pixel på Full HD vid 125% skalning.

Inom VFX-branschen finns termen "fucking pixel" för situationer när en artist blir besatt av en enda pixel på bekostnad av helhetsbilden. Analogin är träffande: det finns en hårfin gräns mellan detaljfokus och perfektionism. Pixar på SIGGRAPH pratade om subsurface scattering, en teknik som blåser liv i animerade karaktärer. De flesta tittare märker inte skillnaden. Men den skillnaden är precis vad som skiljer "bra" från "enastående".

Webbdesign fungerar på samma sätt: en besökare kommer inte att säga "den där pixeln renderades fel". Men den övergripande kvalitetskänslan byggs upp av sådana små saker. OBS-förstoringsglaset är ett snabbt sätt att kontrollera dessa detaljer.

Hela processen från installation till skalning visas tydligt i den här videon:

⁉️🤔 Vanliga frågor

OBS laggar vid skalning, vad ska jag göra?

Kontrollera utdatainställningarna: Inställningar → Video. För pixelinspektion behöver du inte 60 FPS; ställ in 30 eller till och med 15. Håll basarbetsytans upplösning lika med din skärmupplösning. Om det laggar på integrerad grafik, byt renderare till Direct3D 12 i Inställningar → Avancerat → Videorenderare.

Kan jag klara mig utan en andra skärm?

Ja, men skärmutrymmet blir trångt. Ett tips: minimera alla onödiga fönster, lämna webbläsaren med din layout och OBS sida vid sida. På en bärbar dator med Full HD-skärm kan du realistiskt placera OBS på en tredjedels skärmbredd, vilket räcker för punktkontroller. Om det inte räcker, växla till Windows förstoringsglas via Win + +.

Finns det en motsvarighet för macOS?

OBS fungerar på macOS på exakt samma sätt, med skärminfångning via Display Capture eller Window Capture. "Point"-skalning heter Point där (samma filter i förhandsgranskningens snabbmeny). Det inbyggda macOS-förstoringsglaset är Option + Cmd + 8, men det erbjuder inte samma beskärningsflexibilitet som OBS.

Hur kontrollerar jag en specifik pixel i kod?

Öppna elementinspektören i webbläsarens DevTools och hovra över den aktuella noden. Webbläsaren markerar den på sidan. Titta samtidigt på OBS-fönstret; det förstorade området visar varje pixel av kanten, utfyllnaden och bakgrunden. Kombinationen OBS + DevTools täcker de allra flesta pixel-perfekta layoutuppgifter.

Textkantutjämning skiljer sig mellan webbläsare. Hjälper OBS mig att se detta?

Ja, det är precis vad den här tekniken är användbar för. Öppna samma layout i Chrome och Firefox, rikta OBS mot samma textblock, så syns skillnaden i subpixel-rendering med blotta ögat. Det är särskilt märkbart med tunna typsnitt (vikt 300) och ljus text på mörk bakgrund.

Vad ett pixelförstoringsglas ger i praktiken

Den här tekniken är inte för varje mockup. För en landningssida med fem block räcker DevTools. Men om du bygger ett designsystem, felsöker mikroanimationer eller finslipar ett gränssnitt som tusentals användare kommer att se, kommer 10 minuter med OBS-förstoringsglaset att spara timmar av diskussioner med en designer om "varför det inte ser rätt ut".

Börja i liten skala: öppna ditt nuvarande projekt, fånga in en sektion med en ikon och text, aktivera "Point"-skalning. Om du är nöjd med vad du ser, toppen. Om inte, har du precis hittat något du kan fixa på fem minuter.

Vilket verktyg använder du för att kontrollera pixlar under layoutarbete: förstoringsglas, skärmdumpar, eller litar du på webbläsarens inspektör? Berätta i kommentarerna.