Twitch Overlay Size [2026]: 3 Canvases, 3 Formats

Twitch does not publish an overlay size. None of the Twitch pages reviewed for this article, on twitch.tv or on the developer site, confirm a required overlay canvas or a preferred overlay file format. Your Twitch overlay size is the size of your OBS canvas, and that is a choice you make, not a rule you obey.

The numbers that circulate in streaming guides (1920×1080, 2560×1440 and 1080×1920) are conventions, not Twitch requirements. Twitch’s recent official posts, such as the Recaps Spotlight announcement dated October 27, 2026, cover clips, badges and promotions rather than overlay specs. So this guide compares the three canvases creators actually use and the three file formats (PNG, WebM and MP4) that sit on top of them.

If you came for a layout of chat boxes and alerts, start with our walkthrough of building a chat overlay in OBS. This piece sits one step earlier. It settles the canvas and the file format so every asset you make afterwards fits the first time.

Twitch overlay size: the short answer

Pick the canvas that matches your stream output, then build every overlay at exactly that size. For most channels that means 1920×1080. If you stream at 1440p, use 2560×1440. If you stream vertical, use 1080×1920. A lower-resolution fallback of 1280×720 also exists, and it is the one other size that a 2026 size guide reviewed for this article names.

For the file, the rule is shorter. Use PNG for still graphics that need transparency. Use WebM with an alpha channel for animated layers that need transparency. Use MP4 with H.264 video for opaque animated backgrounds where plain compatibility matters more than see-through pixels.

That answer comes with one honest caveat. The sources reviewed do not show Twitch itself accepting or preferring any of these formats for overlays, because Twitch never sees your overlay file. OBS composites it into the stream before the video leaves your machine. The viewer gets one flattened picture, and Twitch treats it like any other video.

That is why “what size does Twitch want” is the wrong question. The right one is “what size is my stream?” Once you answer it, the overlay size answers itself. A layer that is larger than the canvas gets cropped. A layer that is smaller leaves gaps or gets stretched. Only an exact match keeps every pixel you designed.

Here is the whole decision in a table you can screenshot.

The format columns do not change with the canvas. That is the point. The canvas decides pixel dimensions, and the format decides whether the layer can be see-through and whether it moves.

What the sources say, and where they stop

This comparison draws on six kinds of source. The table below lists what each one confirms and, just as useful, what it leaves open. Reading the gaps keeps you from treating a blog’s habit as a platform rule.

Two patterns stand out. First, the official sources agree by silence. Twitch never states an overlay size, and OBS never forces a format. Second, the third-party guides agree with each other on 1920×1080 as the common landscape canvas, but they cite experience, not a Twitch spec.

Think of the guides as a peer group of working streamers, not as a standards body. They converged on sensible numbers because 1920×1080 is the most common stream output and because overlay packs are almost always built for it. That convergence is useful. It is not a rule, and you can break it when your stream needs something different.

A third-party creator-service document adds one more data point. Xsolla’s overlay documentation, updated November 6, 2026, reportedly accepts MP4, WebM, M4V and MOV for video layers and sets a 20 MB maximum file size. That is a limit on Xsolla’s tool, not on Twitch or OBS. It does show how real platforms put a ceiling on animated overlay files, and it is a good reminder to check the file-size limit of whatever service ingests your asset.

Why there are no bitrate or benchmark scores here

You will not find frame-time benchmarks in this comparison. None of the sources reviewed publishes a measured overlay benchmark, and inventing one would mislead you. What the sources do support is relative cost, and relative cost is pure arithmetic: more pixels per frame, more frames per second, more work for your GPU and CPU. The specs table in the next section turns that into numbers you can verify yourself.

Specs table: 1920×1080 vs 2560×1440 vs 1080×1920

The table compares the three canvases on 13 measures. Every pixel figure here is plain arithmetic from the dimensions, so you can check it with a calculator. The Twitch-requirement row restates what the sources reviewed show.

The scale-factor rows show the quiet quality cost of mismatch. A 1080p pack dropped onto a 1440p canvas gets stretched by one third in each direction. Thin lines and small text soften. A 720p asset on a 1440p canvas doubles in size and looks it.

1920×1080: the default Twitch overlay canvas

Build at 1920×1080 unless you have a reason not to. It is the canvas that the third-party size guides reviewed list first for landscape streams, and it is the size most overlay packs and templates assume. A pack built for 1080p drops in at 1.0x with no resampling, so edges stay as sharp as the designer drew them.

Treat 1080p as the baseline you compare everything else against. The 1440p canvas is 1.78x heavier. The vertical canvas has the same pixel count but a different shape. Neither is better in the abstract. Each earns its place only when your stream actually outputs that size.

Safe margins on a 1080p canvas

Leave breathing room around the edges. Viewers watch on screens with different cropping and on players with their own interface elements. A layout that pushes chat text to the last few pixels invites trouble on a TV overscan or inside a mobile player. Keep text and faces inside a comfortable inner box and let only decoration touch the edge.

No margin in pixels is printed here because none of the sources reviewed gives an official one. A good habit is to preview your scene full-screen in OBS, then again on a phone, and nudge anything that feels tight. Two checks beat any number from memory.

What you get on the free plan

OBS Studio has no paid plan. The whole application is free and open source, so the 1080p canvas, the PNG layers and the media sources all cost nothing. As of November 9, 2026, the newest version on the OBS site is OBS Studio 33.0. Whatever you pay for lives outside OBS, in overlay packs, fonts, music and editor subscriptions.

2560×1440: when a 1440p canvas pays off

Switch to 2560×1440 only if your capture, your encoder and your audience all justify it. The sources reviewed describe 2560×1440 as the 1440p production canvas, and none confirms it as a Twitch overlay standard. It is a quality choice you make, and it costs real resources.

The payoff is sharpness. If your game and webcam look crisp at 1440p, a 1080p overlay on top will look soft by comparison, because it gets stretched 1.33x in each direction. Thin outlines blur, drop shadows lose their edge and small text gets fuzzy. Rebuilding the frame at native size fixes all of it.

Upscaling a 1080p pack: the quick fix

You can keep a 1080p pack on a 1440p canvas. In OBS, select the source and use the transform tools to fit it to the screen. The software resamples the image to 2560×1440, and text-heavy panels will show the softness first. Solid shapes and gradients survive far better than hairline strokes.

If you stay on the upscale path, favor PNG frames with bold borders and avoid tiny captions baked into the graphic. Leave small text to live browser sources or text sources, which OBS renders at the canvas resolution. That keeps type sharp while the decorative frame stays soft but unnoticeable.

Who should skip 1440p

Skip it if your PC already runs warm during busy scenes. Skip it if your upload bandwidth cannot carry a higher bitrate. And skip it if most of your viewers watch on phones, where the extra pixels hide. Overlay size is one of the cheaper places to save headroom, and it is rarely the first thing viewers notice.

The sources reviewed for this article do not confirm what output resolution Twitch allows for each account type. Check Twitch’s broadcasting help pages for your own channel before you plan around 1440p.

1080×1920: vertical canvases and the crop problem

Neither works as a design. A vertical overlay has to be drawn for the vertical frame, with its own frame, its own text blocks and its own corner logo. Think of it as a separate scene, not a resize.

Vertical safe areas

Vertical video on a phone sits under interface elements. Apps overlay buttons, captions and counters on the picture. Keep your most important pieces, like a face-cam border or a call-to-action, away from the bottom edge and the sides. A phone preview is the only reliable test, and it takes under a minute.

The sources reviewed give no official pixel values for Twitch’s vertical interface zones, so there is no number to print. Do the phone check, move anything that collides, and save the layout as its own scene.

Dual-format streaming

If you stream both landscape and vertical, plan two overlay sets from day one. Name the files clearly, keep a folder per canvas, and build the vertical set from the same brand assets so the two look related. Reuse colors, fonts and logo shapes, but never reuse the layout. OBS setups for vertical output differ by version and by plugin, so check the OBS documentation for the version you run before you commit to a workflow.

PNG, WebM or MP4: choosing the overlay format

The format decides three things at once. It decides whether the layer can be see-through, whether it can move, and how well it plays on the machines that touch it. The 2026 guidance reviewed for this article settles into a clear split: PNG with transparency for still overlays, WebM with alpha for animated transparent layers, and MP4 for opaque animated 1920×1080 scene backgrounds.

Container and codec are two different things, and mixing them up causes most overlay bugs. WebM and MP4 are containers. The codec inside decides quality and compatibility. The MDN codec guide reviewed makes the point directly: MP4 can carry H.264, HEVC or AV1, so the .mp4 extension alone does not guarantee that a given player will open it.

The WebM Project describes VP9 and AV1 as the standard codecs for WebM, and common VP9 profiles enjoy broad browser support. That matters for overlays because browser sources in OBS lean on browser technology to play web media.

For a plain static graphic, MDN’s image file type and format guide is the neutral reference on when each image type fits. PNG stays the standard answer for transparency without loss. Its third edition became a W3C Recommendation on June 24, 2025, according to the sources reviewed, so it is a current and settled format, not a fading one.

PNG: the workhorse for still layers

Use PNG for anything that does not move. Webcam frames, panel backgrounds, social-handle strips and logo watermarks all belong here. PNG keeps transparent pixels clean and keeps edges sharp, and every editor and every OBS version opens it.

Two habits keep PNGs lean. Export at the exact canvas size, not larger. And avoid baking photos or heavy gradients into a full-canvas PNG, because those inflate the file. If a frame needs a photographic texture, consider a cropped piece with transparency around it.

WebM with alpha: the animated transparent layer

WebM with an alpha channel is the format for glows, scanlines, animated frames and corner pulses that sit over gameplay. The animation plays, and the pixels you left empty stay empty. The guidance reviewed names it as the right choice whenever an animated overlay must preserve transparency.

You need to encode it correctly. The alpha channel only survives with a codec and a pixel format that support it. Developer documentation reviewed identifies VP9 as supporting alpha. A typical command line for turning a numbered PNG sequence into an alpha WebM looks like this:

ffmpeg -framerate 30 -i frame_%04d.png -c:v libvpx-vp9 -pix_fmt yuva420p -auto-alt-ref 0 overlay_alpha.webm

Adjust the frame rate to match your stream, and tune the quality setting for your file-size budget. Always test by dropping the finished file into an OBS scene over a bright, busy background. If the see-through area turns black or white, the alpha did not survive, and you should re-export before building anything around it.

MP4: the safe choice for opaque video

Reach for MP4 when nothing needs to be see-through. A looping full-screen background for a starting screen, an intro sting or a scene transition belongs here. H.264 inside MP4 is the compatibility pick, because nearly every machine decodes it without trouble.

A command line for a clean H.264 export:

ffmpeg -i background_master.mov -c:v libx264 -pix_fmt yuv420p -c:a aac background.mp4

GIF and animated PNG: why they lose

Older animated image formats still turn up in overlay packs. GIF works everywhere but carries a small color palette, so gradients band and soft glows turn crunchy. Animated PNG keeps full color and real transparency, yet the files run large and support in streaming tools is patchy. For a transparent animation, alpha WebM gives better quality per megabyte and the smoothest playback. Keep GIF for a quick share and leave it out of your scene.

From the Vipid archive

If you want an opaque intro as a finished clip rather than a transparent layer, the intro themes list resolution, length and frame rate for each theme, which makes matching one to your canvas straightforward.

Render settings

The export table below keeps your three asset types consistent. The values that change per stream are your own, so the cells point to the setting to match.

One tip saves hours. Matching the frame rate of your stream avoids judder that looks like a bug in the overlay. If you stream at 60 fps, a 30 fps overlay will not break anything, but a mismatched rate can show as stutter in fast motion, so keep them aligned when you can.

OBS Studio 33.0 and what it changes for overlays

None of that touches your overlay size. The reviewed sources confirm no OBS-specific change that demands 1920×1080, 1080×1920 or 2560×1440 overlays, and they confirm no new OBS requirement to pick WebM over MP4 or PNG. The canvas is still what you set it to.

What 33.0 does affect is anything built on browser sources. HTML overlays, chat boxes and web widgets render through the browser framework that OBS bundles, so an updated framework means you should re-test those scenes after you upgrade. Image and media sources are less exposed.

Checking your canvas in OBS

Open Settings and go to the Video tab. Two fields matter. Base (Canvas) Resolution is the size of the workspace your overlays live on. Output (Scaled) Resolution is the size OBS encodes and sends. If the two differ, OBS rescales everything, overlays included, on the way out. For the cleanest result, set both to the same value and build your assets at that value.

The recent version trail

If you stream with an NVIDIA GPU, the driver floor from 32.2 is the one practical gate to check. Compare your installed driver version against 570 before you blame an overlay for a stream that will not start.

Real-world examples: how the formats and canvases show up

These examples come from public pages dated in the last few weeks, plus three worked scenarios built from the arithmetic above. The first four are real software and documentation. Details come from the pages themselves, and none of these tools was run for this article.

1. Quall Studio 1.0.29 (OBS plugin). The plugin’s OBS Forums page dated October 31, 2026 says the release added four-digit-code and QR pairing, remembered devices and installers. It requires OBS Studio 32.2 or newer and was tested with OBS Studio 33.0.1 on Windows and macOS. Plugin makers are already aiming at the new release, so your add-ons are likely to follow.

3. NowPlaying widget for OBS. A music display that stays live on your stream is a textbook browser-style overlay. According to its OBS Forums updates page, an update dated October 10, 2026 added OBS 33 compatibility. It is a reminder to retest any widget after a major OBS upgrade.

4. Xsolla creator overlays. Xsolla’s documentation, updated November 6, 2026, reportedly lists MP4, WebM, M4V and MOV for video layers with a 20 MB maximum file size. If you plan to feed a clip into a service like this, trim your loop to fit the limit before you upload. A short, clean loop in the right container beats a long one that gets rejected.

5. Worked scenario: a 1440p channel with a 1080p pack. A streamer captures at 2560×1440 and buys a pack built for 1920×1080. The frame PNG stretches by 1.33x. The animated WebM corner pulse also upscales, and its decode load stays modest because it covers a small part of the screen. The fix is to re-export the frame at 2560×1440, keep the pulse at its native size inside the layer, and leave text to live sources.

7. Worked scenario: a weak laptop. A streamer on a modest laptop drops the output to 1280×720 to protect frame rate. The overlay pack is 1080p, so every asset scales to 0.667x of its size. Rebuilding the key assets at 1280×720 avoids a resample inside the encoder path and keeps text legible.

What an overlay actually costs

OBS is free. The formats are free. What costs money is everything around them, and the price depends on how you source the art. No verified current price list for any overlay marketplace turned up in the research for this guide, so no pack prices appear here. Check each maker’s pricing page on the day you buy.

Our roundup of free Twitch overlays covers the zero-cost end in detail, including what each source asks in return. For paid packs, the questions are always the same. Does the pack include your canvas size? Does it ship PNG and WebM, or only a single flattened video? And does the licence cover streaming, clips and monetized VODs?

Music and fonts are the hidden costs. An animated overlay that includes a licensed track or a paid font drags those licences into your stream. Strip audio from overlay clips unless you own the track outright, and check fonts for commercial use before you bake them into an image.

Use-case recommendations

These six recommendations match a stream setup to a canvas and a format. Each starts with the answer.

New streamer on a mainstream PC. Use 1920×1080, a PNG frame and one small alpha WebM accent. Keep it light so the layout survives future changes.

1440p streamer with a high-end rig. Use 2560×1440 and rebuild your frame at native size. Keep text in live sources, and test one animated layer at a time while watching your GPU load.

Streamer on a weak or older machine. Use 1280×720, the lower-resolution alternative named in the size guide reviewed. Build PNG-only overlays and skip animated layers until your frame rate is steady.

Vertical or dual-format creator. Draw a separate 1080×1920 scene with its own PNG frame. Preview on a phone before every change, and keep landscape and vertical file sets in separate folders.

Brand-first channel with a signature intro. Use an opaque MP4 with H.264 for the full-screen sting and a PNG for the matching still frame. Our guide to animated logo formats lists which file types suit each logo animation, and the sample intros show finished results.

Streamer who runs lots of widgets. Stay on browser sources for chat, alerts and music, and retest them after each OBS upgrade. Keep the decorative frame as PNG so the heavy lifting stays on live sources.

Migration guide: moving your overlays to a new canvas

This process moves a working 1080p setup to 1440p or to a vertical scene. The steps hold for any canvas change. Allow an evening, not a weekend.

1. Back up your OBS scene collection. Export it and copy the folder that holds your overlay files, so you can return to the old state in one step.
2. Write down your current Base (Canvas) Resolution and Output (Scaled) Resolution from Settings, Video. You want a record in case you need to undo.
3. List every overlay asset and tag it as still, animated transparent, or opaque video. This list becomes your re-export checklist.
4. Change the canvas and output size in Settings, Video. For a vertical stream, build the layout as its own scene and check the OBS docs for your version before you wire up any second output.
5. Re-fit the sources. Use the fit-to-screen transform on full-canvas layers and eyeball the panels. Expect 1080p assets to look soft on a 1440p canvas.
6. Re-export the full-canvas assets at the new size. Start with the frame PNG, then the alpha WebM layers, then any opaque MP4 backgrounds. Test each WebM over a bright busy background to confirm the alpha survived.
7. Retest every browser source. If you moved up to OBS 33, check chat, alerts and widgets first, because the browser framework changed.
8. Record a short test with every scene active, watch it on your phone and on a second display, then check the stats panel for dropped frames and encoder load.
9. Keep the old scene collection for a week. Delete it only after a full week of streams with no rollbacks.

Mistakes that cost people a stream

Three errors show up again and again. The first is a mismatch between base and output resolution, which makes OBS rescale everything and softens fine overlay detail. The second is a WebM that lost its alpha, which turns a glow effect into a solid rectangle across your gameplay. The third is a browser-source widget that nobody retested after an OBS upgrade. Each takes a minute to catch before going live and an embarrassing hour to fix on air.

The stream intros and overlays hub collects the related step-by-step guides for each of the screens you will rebuild.

Pros and cons by choice

Every option in this guide trades something. This section lists the trade honestly, so the verdict that follows has a trail.

Canvas choices

1920×1080. Pros: matches most packs and tutorials, lightest of the landscape sizes, easy to share. Cons: softer than a native 1440p frame on high-resolution displays.

2560×1440. Pros: sharper frames, text and lines, more headroom for crisp art. Cons: 1.78x the pixel load, more stretch for any 1080p pack, no Twitch overlay rule behind it.

1080×1920. Pros: fits vertical viewing, same pixel count as 1080p. Cons: landscape overlays do not transfer, and the layout work is a second project.

1280×720. Pros: easiest on a weak machine. Cons: fewer pixels for text and fine art, and 1080p packs shrink by a third.

Format choices

PNG. Pros: transparent, sharp, universal. Cons: still only, and big if you pack photos into it.

WebM with alpha. Pros: animated and see-through, the right tool for layers over gameplay. Cons: needs the right codec and pixel format, and a wrong export leaves a solid box.

MP4 with H.264. Pros: opens almost everywhere, simple to produce. Cons: generally not the tool for transparent layers, and quality depends on codec settings, not just the file extension.

Verdict: build at your stream size and pick the format by transparency

Twitch gives you no overlay size, so the size you build at is the size you stream at. For most channels that is 1920×1080, and the evidence points the same direction from every angle. It is the common landscape canvas in third-party guides, the baseline for the pixel math, and the size overlay packs expect.

Move to 2560×1440 only when your capture and your audience justify the 1.78x cost, and rebuild the frame at native size when you do. Go vertical with a dedicated 1080×1920 scene, never a crop. Drop to 1280×720 when frame rate matters more than fine detail.

For format, ask a single question about each layer. Does it need see-through pixels? If yes, use PNG for still art and alpha WebM for motion. If no, use H.264 MP4. That one question covers nearly every overlay decision, and it works on every canvas in this guide.

Questions creators ask

What is the right Twitch overlay size?

Match your OBS canvas. For most streams that is 1920×1080, with 2560×1440 for 1440p streams and 1080×1920 for vertical ones. The Twitch pages reviewed for this article do not set a required overlay size, so the number follows your stream, not a platform rule.

Does Twitch require 1920×1080 for overlays?

The sources reviewed do not confirm that. Twitch receives your finished stream video, not your overlay files, because OBS merges the layers before encoding. Use 1920×1080 because it is the common standard and because most packs assume it.

Should I use PNG, WebM or MP4 for my overlay?

Use PNG for still graphics, WebM with alpha for animated see-through layers, and MP4 with H.264 for opaque video. The format follows transparency and motion, not the canvas size. A quick test in an OBS scene tells you whether a given file keeps its see-through pixels.

Can I use a 1080p overlay on a 1440p canvas?

Yes, but it stretches by 1.33x in each direction. Solid shapes survive well, while thin lines and small text soften. Rebuild the frame at 2560×1440 when you can, and keep text in live sources.

Does OBS Studio 33.0 change overlay sizes?

No change to overlay dimensions was confirmed in the sources reviewed. The reported 33.0 changes cover an updated browser framework, plugin loading and snapping. Retest browser-source overlays after upgrading, and back up your scene collection first.

Why does my animated overlay show a black box?

The alpha channel probably did not survive the export. Re-encode with a codec and pixel format that carry alpha, such as VP9 with yuva420p in a WebM, and check the result over a bright background in OBS before you build around it.

More from the Vipid blog

• OBS vs ShadowPlay vs Medal [2026]: 3 Free Recorders
• OBS vs Streamlabs [2026]: $0 vs $27/mo for Ultra
• Starting Soon Screen OBS [2026]: 11 Steps in 25 Min