OBS Browser source size versus stream resolution: 800 × 600 and 1280 × 720 explained.

The short answer

The Width and Height of an OBS Browser source set the size of the web page’s viewport, in pixels: the page is laid out as if it were a browser window that big. Your stream’s canvas and output resolution are separate settings, and the source is scaled and positioned on the canvas like any other. So “what size should the Browser source be?” really asks “how big should the Broker and his captions be rendered before OBS places them?” The app asks for 800 × 600; the developer’s own scene uses 1280 × 720. Both work; they lay the overlay out differently. New in this version: the arithmetic for three canvases, the three presets as numbers, and what a downscaled output does to all of it.

What Width and Height actually set

The OBS Studio knowledge base describes the Browser source’s Width and Height as the viewport width and height of the browser page, with defaults of 800 and 600. With Local file off, the URL field is what loads, which is where the address copied from the app goes. The default custom CSS (body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }) makes the page background transparent, removes the body margin and hides the scroll bar, which is why the Broker appears over your game with nothing around him. “Use custom frame rate” renders the page at the FPS you set instead of OBS’s default; “Shutdown source when not visible” unloads the page while the source is hidden or in an inactive scene; page permissions control what the page may read from OBS.

In other words, the two numbers are not a video resolution. They are the window the overlay page thinks it lives in.

Canvas and output are separate from the source

In OBS, Settings → Video shows two resolutions. The Base (Canvas) Resolution is the size of the scene you compose; OBS’s overview guide calls it the amount of space you have to fit your sources, and every source is positioned and scaled inside it. The Output (Scaled) Resolution is what is encoded for the stream or recording, using the downscale filter chosen in the same dialog; if it differs from the canvas, the whole composed scene is scaled at encode time. A Browser source keeps its own viewport size regardless of either; what you change in the scene is its transform (position and scale), via Edit Transform or by dragging it in the preview.

Two consequences follow. A source rendered small and scaled up looks soft, because OBS enlarges pixels that were never there. And a source rendered large and scaled down wastes rendering work. The comfortable choice is a viewport that is already close to the size you want on the canvas.

Why the app asks for 800 × 600

The in-app Set up OBS card gives the steps word for word: add a Browser source, keep Local file off, paste the copied address, “Set Width to 800 and Height to 600”. That is a 4:3 viewport, the OBS default, and it is the frame the app’s presets are designed around: Centered puts the Broker in the middle with his line above him; Bottom left and Bottom right put him in that corner with the line opening toward the middle of the source. Dialogue size sets how large his captions are. At 800 × 600 on a 1920 × 1080 canvas the source covers a little over a third of the width, which suits a corner placement over most games.

Why the developer runs 1280 × 720

The developer’s own OBS dialog, shown in the OBS guide, has Width 1280, Height 720, a custom frame rate of 30 and the default CSS. That is a 16:9 viewport, the same shape as the canvas, so the source can sit as a full-width layer on a 720p canvas or be placed at two thirds of a 1080p one without changing its shape. The trade-off is that the overlay page has a wider, shorter window to lay the Broker out in than the 4:3 frame the presets describe, so the same preset can look different: more room beside him, less above him. The app does not document how its layout adapts to a viewport other than 800 × 600, which is exactly why this article ends with a recording check rather than a promise.

Worked examples: three canvases

Everything below is arithmetic on the source’s transform, with the 800 × 600 viewport the app asks for. Four rules produce every number: the on-canvas size is the viewport times the scale; a corner position keeps a margin m from the edge, here 2% of the canvas width rounded to whole pixels (the convention of the layout preview, not an OBS rule); a left corner is X = m and a right corner X = W − w − m; the bottom is Y = H − h − m, and centred means X = (W − w) ÷ 2, Y = (H − h) ÷ 2.

• 1920 × 1080 (16:9), m = 38. At 100% the source is 800 × 600: 41.7% of the width, 55.6% of the height. Centered: X 560, Y 240. Bottom left: X 38, Y 442. Bottom right: X 1082, Y 442. At 75% it is 600 × 450 (31.3% × 41.7%): Centered X 660, Y 315; Bottom left X 38, Y 592; Bottom right X 1282, Y 592.
• 2560 × 1080 (21:9), m = 51. The same 800 × 600 is only 31.3% of the width but still 55.6% of the height, so he looks narrower and just as tall. Centered: X 880, Y 240. Bottom left: X 51, Y 429. Bottom right: X 1709, Y 429. At 75% (600 × 450, 23.4% × 41.7%): Centered X 980, Y 315; Bottom left X 51, Y 579; Bottom right X 1909, Y 579.
• 1080 × 1920 (9:16, vertical), m = 22. The 800-wide source spans 74.1% of the width and 31.3% of the height, so a corner preset puts him close to the bottom centre anyway and 75% is the natural choice. At 100%: Centered X 140, Y 660; Bottom left X 22, Y 1298; Bottom right X 258, Y 1298. At 75% (600 × 450, 55.6% × 23.4%): Centered X 240, Y 735; Bottom left X 22, Y 1448; Bottom right X 458, Y 1448.

Type the X and Y into Edit Transform as Position and the on-canvas size as Size, or drag the source in the preview to the same place. To clear a HUD block of height h under a bottom corner, subtract h from Y; the placement guide does this for three HUD styles.

The three presets as numbers

The preset decides where the Broker sits inside the source; the table pairs each preset with the canvas position it was designed for. The percentages are the source’s share of the picture, which is what a viewer actually sees.

When the output is downscaled

OBS documents the Output (Scaled) Resolution as the resolution the stream or recording is output at, using the selected downscale filter, and its performance guide lists reducing the output resolution as a way to lighten the encoder. Downscaling happens after the scene is composed, so it changes pixel counts and nothing else: every source, including the Browser source, is multiplied by the same factor, output width divided by canvas width, and the shares in the table above stay exactly as they are.

Three things change in practice. The captions are laid out for an 800-pixel-wide page and then shrunk by the factor, so text that was comfortable on the canvas can be small in the file: raise Dialogue size in the app, not the source’s scale, because a scaled-up source is enlarged before being shrunk again and arrives soft. The positions you typed stay valid; they are canvas numbers and OBS does the multiplication. And a 75% source that is then output at two thirds is drawn at half its viewport size, which is the point at which the article’s advice to keep the viewport near the on-canvas size starts to matter for the avatar as well as the text.

How to pick a size for your stream

1. Decide where he goes first. A corner companion over the game, or a wide layer with captions across the bottom? The overlay layout preview lets you drag either source size around a 16:9, 21:9, 4:3 or vertical scene and copy the numbers for Edit Transform.
2. Match the viewport to the placement. Corner placement: 800 × 600 (the app’s card). Full-width or large placement on a 16:9 canvas: 1280 × 720 (the developer’s scene). Avoid scaling a source by more than about half either way; change the viewport instead.
3. Keep the preset consistent between the app and your intent: choose it in the app (Preview preset shows it in your browser), then place the source in OBS.
4. Leave the custom CSS alone. The default is what makes the background transparent.
5. Frame rate: the developer runs 30 with “Use custom frame rate” on; leave the box off if you prefer OBS’s own rate.
6. Mind the output. If you downscale, read the captions in the file, not on the canvas, and fix size in the app.

Check it in two minutes

1. Start a session, make a 30-second recording with the game and the Browser source in the scene, and watch it: is the Broker the size you expected, are the captions readable at your output resolution, is his voice there (Desktop Audio, not the source)?
2. If the captions are too small, raise Dialogue size in the app before enlarging the source in OBS.
3. If the source looks soft, your viewport is smaller than its size on the canvas: pick the larger viewport instead of scaling up.

The overlay has no sound of its own; the voice reaches OBS through Desktop Audio. Streaming a session spends Signal Time exactly like playing without a stream. Founder Alpha is early-access software, sold to customers in the United States only.

Limits

• How the overlay page lays out the Broker inside a viewport other than 800 × 600 is not documented by the app; the article describes what is known and asks you to check with a short recording.
• The worked examples are arithmetic on the source’s transform, not measurements of the real overlay: the Broker’s size inside the source and the caption wrapping are the app’s, and only a recording shows them.
• No encoder, bitrate or quality advice beyond the resolution relationship is given.
• Founder Alpha is early-access software; the overlay has no sound of its own, and the voice reaches OBS through Desktop Audio.