How to add overlays to OBS
How to add overlays to OBS using image, media, and browser sources, plus where to find overlays, how to layer them, and the performance settings that matter.
By Soulstack · Stream Production · 4 min read · Published , updated
In this guide
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
Choose a source that matches the asset. These types are not interchangeable for every overlay:
- Image source. For static PNGs, JPEGs, or GIFs. Usually lighter than an animated or interactive page, but not literally free of rendering 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. Common for web-based widgets that update from live 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).
- Decide whether the page should unload while hidden. Keep it running if it needs to receive events between scenes.
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.
For paid work, compare the current quoted scope, file formats, usage rights, revision terms and total cost. There is no fixed price range that covers every template or commission.
For a first overlay, free is fine. Use it until you can name a problem a redesign would solve.
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
Animated and interactive pages can add rendering work. Useful checks include:
- One browser source per scene where possible. Combine multiple widgets into a single URL if the service supports it.
- Shutdown can reduce background work, but unloading a live widget can interrupt its connection. Test the service's behaviour before changing it. OBS Browser source (opens in a new tab)
- 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)
Use the service's test events rather than waiting for a real follow or subscription to discover a broken alert.
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.