Twitch graphics for a roleplay server: the sizes and the rules

A roleplay server lives or dies on the streamers in it, and a streamer's channel has exactly two slots where your server's branding can sit without being in the way of the stream. One is seen only when the channel is offline. The other is seen every time somebody scrolls down, forever. Most servers get the first one and forget the second, which is the wrong way round.

The two slots

The offline screen is a holding card, not a poster

Twitch calls it the Video Player Banner. It fills the player when the channel is not live, which in practice is most of the day. It accepts JPG, PNG or GIF up to 10MB, and it is displayed as a still regardless of what you upload, so an animated file here is wasted weight.

The thing that catches people is where it is seen. A viewer arriving at an offline channel sees the player area at whatever size their window gives it, often a few hundred pixels tall, with the channel's own name and avatar directly beneath it. So the screen does not need to say the streamer's name. It needs to say what server they play on, and where to find it.

• Keep the lockup in the middle band. The player crops height before it crops width on narrow windows.
• Put the invite on a ribbon rather than as loose text, so it survives being read at a third of the size.
• Do not put anything important in the lower right. That is where the player chrome and the follow prompt sit.

A 30fps MP4 of the same scene ships alongside the still, which is the file to drop into OBS as a scene background for a starting-soon or be-right-back screen. That is the right use of the motion: in the stream, where it plays, rather than in the slot, where it does not.

The panel is the one that works

320 pixels is the maximum width Twitch renders a panel image at. That is not a recommendation, it is the ceiling: upload wider and it is scaled down. The height is yours, but 100 pixels is the convention and it is a good one, because panels stack and a tall panel pushes everything else off the first screen.

What makes the panel valuable is that it is a linked image. A viewer clicks it and goes wherever you point it, which for a roleplay server is the Discord invite or the apply page. It is the only element on a Twitch channel that turns a viewer into a member in one click.

1. Go to your channel page and turn on Edit Panels.
2. Add a panel, choose Image, and upload the 320x100 file.
3. Set the Image Links To field to your invite, not to your website root.
4. Give the panel a title that says what happens on click, such as Join the server.

Designing for 320 pixels

320x100 is a strip about the size of two lines of text. Everything that works at banner size fails here, and the failures are predictable.

• A full scene becomes mud. At this size the backdrop is a colour field, so it should be treated as one.
• Thin type disappears. The wordmark needs weight, not elegance.
• Two pieces of information is the limit. Server name and what to do, nothing else.
• Contrast does the work. The panel sits on the channel's own page background, and that background is dark.

The panel in a pack is rendered at 960x300, three times its target, and downscaled. That is not vanity: the browser draws it on a display that may be at two or three times device pixel ratio, and a 320-pixel file on a high-density screen is visibly soft exactly where the type is.

What to do with the rest of the pack

A streamer in your server can use more than the two Twitch slots, and the files are already in the pack.

The watermark is the one worth setting up properly. It is a transparent WebM, so in OBS it goes in as a media source with the loop option on, sits over the gameplay capture, and carries the server name on every clip that leaves the stream. That is branding that travels without anybody having to remember to do anything.

Questions people actually ask

Why is my offline screen blurry?

Almost always because it was uploaded at the display size rather than at 1920x1080. Twitch does not upscale; it shows what it has at whatever size the player happens to be, which on a large monitor is bigger than a small file.

Can panels be wider than 320?

No. Twitch renders panel images at 320 pixels wide. A wider file is scaled down, which costs sharpness and nothing else.

Does an animated offline screen work?

The slot accepts a GIF under 10MB, but Twitch shows it as a still. If you want motion when the channel is offline, run the MP4 in OBS on a looping scene and go live with it instead.