An overlay is a layer of graphics or text shown on top of your game or webcam during a stream. Overlays can be static images (a frame around your webcam), animated graphics (a sub goal counter), or interactive elements (a chat box, a recent follower display).
OBS treats overlays the same way it treats anything else on screen: as a source within a scene. Adding one is straightforward; the choices that matter are which type of source you pick and where to find the overlay file.
The three source types for overlays
In OBS, the same overlay can be added in three ways. Each has tradeoffs.
- Image source. For static PNGs, JPEGs, or GIFs. Lightweight, no CPU cost. Use this for static webcam frames, logos, and any element that does not change during the stream.
- Media source. For MP4, MKV, or other video files. Higher quality animations than GIF. Use this for opening animations, transitions, or any one-off animation that is not interactive.
- Browser source. For HTML and JS. Required for anything that needs to update in response to chat, follows, donations, or sub events. Higher CPU cost because OBS runs a full browser in the background.
The default move is to use the simplest source that does the job. A PNG webcam frame should not be a browser source.
Adding a static image overlay
The minimum case:
- Right click in the Sources panel and choose Add, then Image.
- Browse to your PNG file. Tick "Make source visible" if it is not already.
- Drag the image to position it. Hold Alt to crop the edges if you need to.
- Right click the source, then Transform, then "Fit to screen" if you want the image scaled to the canvas.
Lock the source (the padlock icon in the Sources panel) once you have it placed. This prevents accidental movement during a stream.
Adding an interactive overlay
For alerts (recent follower, recent sub, donation toaster), the source needs to be a browser source pointed at a widget URL from your overlay tool. The pattern is:
- Sign in to your overlay tool and configure the alert widget.
- Copy the browser source URL the tool generates for your account.
- Right click in Sources, Add, Browser source.
- Paste the widget URL.
- Set the width and height to match the widget's design (1920 by 1080 for full screen, smaller for a corner alert).
- Tick "Shutdown source when not visible" to free CPU when the scene is not active.
A single alert source can handle multiple alert types (follower, sub, donation). You do not need a separate browser source for each.
Where to find overlays
Free options:
- Twitch and YouTube creators on Itch.io and Gumroad release overlay packs for free or pay-what-you-want.
- Some streaming toolkits bundle a scene editor with drag-and-drop widgets and scene management, so you can design overlays and export them as browser source URLs without a separate graphics tool.
Paid options range from £5 single-pack templates on niche stores to £100 or more for custom overlay commissions from designers on Fiverr or Behance.
For a first overlay, free is fine. Most streamers replace their overlay within six months as their channel identity firms up.
Layering and order
OBS draws sources in the order they appear in the Sources panel, from bottom (drawn first) to top (drawn last). Common ordering:
- Background or game capture at the bottom
- Webcam above that
- Decorative frames around the webcam
- Alert popups above everything else
- Chat overlay at the top if you display chat on screen
If something is missing from your scene, check whether it is hidden behind something higher in the source list.
Performance
Browser sources are the biggest overlay cost. Three rules to keep performance sensible:
- One browser source per scene where possible. Combine multiple widgets into a single URL if the service supports it.
- Tick "Shutdown source when not visible" so OBS does not run the browser when a scene is hidden.
- Avoid leaving browser sources at 1920 by 1080 when the actual widget is a 400 by 300 popup. Smaller browser sources use less memory.
Testing
Test your overlay setup before going live, not during. Switch to each scene and confirm:
- Every source is visible at the correct position
- Alerts trigger by sending yourself a test alert from your alert service
- Browser sources are not blank (a blank browser source usually means a bad URL or a service login that expired)
A 5-minute test catches the alert that has been broken for three weeks because nobody followed your stream during it.
When to redesign
The temptation to redesign your overlay every three months is strong. The honest answer is that audiences notice your face and your voice, not your overlay frame. Save the redesign work for when you have a specific reason: a brand refresh, a sponsor requirement, or a real performance problem with the current setup.