Preparing Character Art: Sizes, Formats and Cropping

Updated October 12, 2026 6 min read

Art is what makes a roster convincing. The layout can be perfect and the cast inspired, but if the portraits are inconsistent the screen looks like a collage. The good news is that the fix is mostly preparation, and it takes a few minutes per fighter once you know what each image is used for.

The two image slots

Every fighter in Fighter Roster has two images, and both are required.

• Grid View image. The small tile in the character grid. It is often displayed at well under 150 pixels wide, so it needs to read at a glance.
• Large Display image. The big render shown in the player panel when a fighter is highlighted or selected. This is where full-body and action art belongs.

The most common mistake is uploading the same picture to both. A full-body render squeezed into a tile becomes a tiny figure in a lot of empty space. Treat the two slots as separate crops of the character, even when they come from the same source file.

File rules

• Formats: JPEG, PNG, GIF and WebP.
• Maximum size: 2 MB per image. Larger files are rejected at upload.
• Transparency is supported in PNG and WebP, and is strongly recommended for the Large Display image.

WebP is the best default. A cut-out render that weighs 3 MB as a PNG often lands under 400 KB as a WebP at a quality setting most people cannot tell apart, which keeps you clear of the limit and makes the roster load faster for everyone you share it with. Any current image editor can export it, and so can free online converters.

Sizing

You do not need large files. Select screens show art at screen size, not print size.

• Grid View: around 400 by 400 pixels is plenty. Go to 400 by 533 if you plan to use portrait-shaped cards.
• Large Display: roughly 800 to 1200 pixels on the long edge. Beyond that you are only adding file size.

If you use the Custom theme, note that its card shape setting changes the tile aspect ratio. Square, rounded, circle and hexagon cards are 1:1, portrait cards are 3:4 and wide cards are 4:3. The image is cropped to fill the card, so keep the face near the centre of the grid image and it will survive any of them.

Cropping the grid image

Crop tighter than feels natural. On the real select screens the tile is nearly all face: forehead to chin, with a little shoulder. Hair, hats and horns can touch or cross the edge. What matters is that the eyes sit in the upper-middle of the frame and that the character is identifiable from the silhouette alone.

Keep the framing the same across the cast. If one fighter is cropped at the chest and the next at the chin, the grid looks uneven even when every individual tile is fine. A quick way to check is to shrink your editor window until the tiles are thumbnail size and see which ones jump out.

Preparing the large render

A transparent background makes the biggest difference here. Themes draw their own stage, vortex or alley behind the fighter, and a render with a solid rectangle around it covers that artwork up. If your source image has a background, remove it. Most editors have a one-click subject selection tool, and free background removers handle clean character art well.

Leave a small transparent margin around the figure rather than cropping to the pixel, and try to keep the scale similar between fighters: a character whose render is cropped at the waist will appear much larger than one shown head to toe. Either pick one framing for the whole cast or accept the difference deliberately, the way some games mix full-body and bust renders.

Making a mixed cast look consistent

Crossover rosters draw from different games, artists and decades. A few habits pull them together:

• Pick one kind of source. All official renders, all in-game screenshots or all work by a single fan artist will look more unified than a mixture.
• Match brightness and saturation. Nudge the outliers until no tile is noticeably brighter or duller than its neighbours.
• Use one facing direction. Many select screens mirror art for player two, so fighters that all face the same way look intentional.
• Give the grid tiles one background treatment, such as a flat colour or a soft gradient, when the sources differ.

Using art you are allowed to use

Upload art you made, art you have permission to use, or art that is in the public domain. If you commission or borrow fan art, credit the artist in the roster name or tags and respect their terms. The sample fighters that Fighter Roster can add to a new pack use public-domain artwork for exactly this reason, and they are a useful reference for crop and size.

A quick checklist

1. Two files per fighter: one face crop, one cut-out render.
2. Both under 2 MB, ideally WebP.
3. Face centred in the grid image.
4. Transparent background on the large render.
5. Same framing, brightness and facing direction across the cast.