Loading
The five image sizes a FiveM server needs, what the client does with each one, and why the ratios are so unusual that nothing else on the internet reuses them.
7 min read
There is no page in the FiveM documentation that lists the sizes a server needs, which is why almost every server runs at least one graphic at the wrong dimensions. The sizes exist, they are consistent, and they are strange enough that you cannot borrow anything from a Discord template and expect it to fit. This is the list, with what the client does with each file and the layout constraint that follows from it.
| Slot | Size | Set or uploaded where | Animates |
|---|---|---|---|
| Server list detail strip | 1865x108 | server.cfg, sets banner_detail | Yes, as a GIF |
| Connecting screen | 1920x320 | server.cfg, sets banner_connecting | Yes, as a GIF |
| Server list icon | 96x96 | Cut from your logo, referenced by the server | No |
| Loading screen | 1920x1080 | A resource with loadscreen in its manifest | Live, in the client |
| In-game watermark | 768x288 | Your own NUI overlay or HUD resource | Yes, APNG or WebM |
This is the widest aspect ratio in common use anywhere, at roughly 17 to 1. The FiveM client draws it across the top of a server's detail panel, which is the view a player gets after clicking your entry in the server browser. It is set with a convar rather than uploaded, so the client fetches it from a URL you host every time somebody opens the panel.
The ratio is the whole problem. At 108 pixels of height there is room for one line of display type and a thin ribbon, and that is it. A second line of text is unreadable at the size the panel renders. More importantly, the panel is clipped on narrow client windows and the clip comes off both ends, so a centred server name can lose its first and last letters on a windowed client at 1280 wide.
The layout that survives puts the wordmark left of centre, the invite in the right third, and keeps forty pixels of dead space at each edge. A clipped panel then loses background rather than losing half your name. Render at twice the target, 3730x216, because the panel is drawn at the player's display density and a file authored at exactly 1865x108 looks visibly soft on any modern monitor.
This is the one every player sees. The detail strip is only seen by people browsing the list; the connecting banner is drawn across the top of the connecting dialog, which appears every time anybody joins, and stays on screen through the handshake, the resource download and the first spawn. On a server with a large resource list that is well over a minute on a first join.
At 6 to 1 the proportions are much friendlier, so there is room for the wordmark at full weight, a tagline underneath and a ribbon. The constraint here is the bottom edge: the client draws the connection status text, the progress indicator and the cancel button immediately below the banner, and on short windows the lower rows sit behind them. Keep the lockup in the upper two thirds and treat the bottom sixty pixels as a gradient out.
Do not crop this out of the detail strip. A 17 to 1 composition cropped to 6 to 1 puts the lockup in the wrong third, because the strip was laid out assuming an enormous amount of horizontal space either side of the name. Lay it out again at 1920x320 and it reads as a deliberate composition.
On animation, prefer a slower loop here than anywhere else. Eighteen frames a second over four seconds is plenty, and because the dialog sits on screen for twenty seconds or more, a calm loop wears far better than a busy one. Every joining player downloads this file, so the size budget matters: keep it comfortably into single-digit megabytes.
The icon beside your server name in the browser is rendered at 96x96. That is small enough that lettering is noise. Anything smaller than about a fifth of the frame disappears, and thin strokes alias into a smudge. What works is a single bold symbol with strong contrast against the list's dark background.
The right way to produce it is to cut it from a larger transparent render rather than designing at 96 directly, so the mark is identical to the one on your Discord, your store and your watermark. A 1024x1024 source downscales cleanly to 96, and to 512, 256, 128, 64 and 32 for everything else you will need. Six independent exports at six sizes always drift: the stroke weight changes, the padding changes, and the smallest copy ends up looking like a different mark.
The loading screen is not an image slot, which is where most of the confusion about it comes from. It is a resource: a folder in your resources directory with an fxmanifest.lua declaring loadscreen 'index.html', and the client renders that page full screen while the server loads.
That means 1920x1080 is an authoring size, not a delivery size. If the loading screen is a video file, then yes, 1920x1080 is what you encode and the client upscales it for anybody running above that, which is most people now. If it is a live page, you author the composition at 1920x1080 and scale it with a CSS factor read from the window size, and it renders natively at whatever the client is actually running, ultrawide included.
function fit() {
var s = Math.min(window.innerWidth / 1920, window.innerHeight / 1080);
document.documentElement.style.setProperty("--s", String(s));
}
fit();
window.addEventListener("resize", fit);That is the entire scaling mechanism: one factor, applied to the root, with every size in the stylesheet expressed in terms of it. A composition built that way is identical on a 1080p laptop and a 3440x1440 ultrawide, and it weighs a few hundred kilobytes instead of forty megabytes.
FiveM has no watermark slot. This one is a size convention rather than a client requirement, and it exists because 768x288 is roughly a seventh of the width of a 1080p screen, which is the band where a corner lockup is readable in a compressed phone video without sitting in the way of gameplay.
You display it yourself, usually with a tiny resource whose NUI page is nothing but the transparent image positioned absolutely in a corner. Top left or top right: the lower right is the minimap on almost every HUD resource and the lower left is chat and notifications. It needs real transparency, which means an APNG rather than a GIF if it animates, because GIF alpha is a single on-or-off colour index and soft edges fringe badly over gameplay.
A few sizes circulate in FiveM communities that are not FiveM sizes at all. 1920x1080 as a 'server banner' is usually somebody describing the loading screen. 960x540 is the Discord server banner and has no FiveM slot. 1280x720 gets requested as a 'server thumbnail', which is a YouTube thumbnail size somebody has repurposed. If a seller offers you a FiveM banner at 1920x1080, ask which convar it is for, because neither of the two takes that ratio.
The single most common quality problem with server graphics is not the design, it is the resolution. Every one of these slots is drawn at the player's display density, so a 1865x108 file is being asked to fill 3730x216 physical pixels on a high-density monitor. Thin type is where that shows first and worst.
The rule of thumb that works: render stills at twice the target for anything above about 600 pixels wide, and at three times the target for anything smaller. A 468x60 banner wants to be authored at 1404x180. A 300x300 avatar wants 900x900. The file is larger, nothing else about it changes, and it is the difference between looking rendered and looking resized.
Animated versions are a different trade, because every extra pixel is multiplied by the frame count. There the sensible move is to render the motion at the target size or at most double it, and spend the budget you save on frame rate and palette instead. A 24fps GIF with a 240-colour palette at the target size looks considerably better than a 12fps GIF with 64 colours at twice the size, and it is the same file size.
Get those five right and your server looks, in the browser and on the connecting screen, like somebody made decisions about it. That is most of what branding does at this level: it is not that a good banner persuades anybody to play, it is that a wrong-sized one tells them nobody is paying attention.