Skip to content

Images

Request assets from the publisher

We recommend requesting assets as soon as you start your project. Obtaining them can take some time, so requesting them early helps ensure you have them when you need them.

What to request

Request every graphic element you will display in your game:

  • The publisher's print files for cards, boards, and other components
  • 2D images of any 3D elements, viewed from the angle you plan to use on BGA
  • Thematic backgrounds, if available, and any other elements that are not components of the physical version but will make your adaptation look nice
  • Metadata images (these are only required when moving to alpha, but requesting them from the start is a good idea)

Format to request

Print files in PDF format are usually ideal, but if the publisher can convert them for you (for example, by extracting each card as a WebP or PNG file), that's fine too.

Depending on the files they send, you may need to convert or edit them before using them in your project.

You can find the required format for metadata images in the Game Metadata Manager.

Text on game art

Cards, boards, and other components may have text on them. It's best to use images without text in your project and overlay translatable text.

PDF files usually contain multiple layers, so you can use tools like Inkscape to remove the text.

If the publisher sends you images without text, remember to request the English version as well, so you can use the official card text as the source for translations.

Game art

You must upload all images used in your game interface to the img directory.

For images to be deployed correctly, their filenames should not contain spaces or parentheses.

Limitations on older devices

Do not use images larger than 4096 × 4096 pixels, as they will not work on mobile devices (the maximum texture size on Android is 4096 pixels; you can test your browser at WebGL Report). See this Stack Overflow page for more details.

Image loading

Be careful: by default, ALL images at the root of your img directory are loaded in each player's browser when they load the game. Avoid putting unused images there, as they will slow down loading. Images in subdirectories of img are not preloaded by default, so you can use subdirectories for images that are only needed when an expansion is enabled, for example.

You can control how images are loaded with the JavaScript methods preloadImages and dontPreloadImages (see https://en.doc.boardgamearena.com/Game_interface_logic:_Game.js#Image_loading). For example, you can use preloadImages to load images from a subdirectory when an expansion is enabled.

As a general recommendation, use no more than a dozen image files, each no larger than 2 MB. However, if you have large image assets specific to a player (such as a player board in a particular color or a set of cards), it's better to keep them separate and disable preloading for them, since only some will be used in any given game.

Image formats

You can use these image formats while building your game interface:

WebP images

Use WebP whenever possible. It produces small files and supports transparency.

JPEG images

Use JPEG for images that do not need transparency. JPEG files are usually smaller than PNG files, so choosing JPEG for large images (such as game boards and cards) can speed up loading. Rounded card corners do not require transparency; you can create them with CSS.

PNG images

Use PNG for images with transparency, such as non-square tokens and meeples, combined into a sprite sheet.

GIF images

GIF can be used for animated images. Animated GIFs are generally not recommended because they can bother players, but they may be useful for specific interface elements.

SVG images

SVG images can be very efficient for icons or abstract images. For icons, also consider using Font Awesome instead of separate asset files.

Use background-size

To let players zoom in with their browser without images becoming pixelated, use images with a higher resolution than needed at the default zoom level. Use the CSS property background-size to display them at the size your interface needs.

Use CSS sprites

To reduce the number of images loaded and make the game load faster, you must use CSS sprites: combine several images into a single sprite sheet.

Tools:

Shrink images

If you receive high-resolution images from the publisher, you need to shrink them because displaying images on the web requires a much lower resolution than printing.

Image manipulation tools

To create a successful game adaptation, you will need image editing tools for tasks such as:

  • Converting to supported formats
  • Adding transparency
  • Stitching
  • Reducing file sizes without a loss of quality
  • Resizing

Recommended tools (feel free to add others you know):

  • GIMP (all platforms) - general graphical image editor
  • Paint.NET (Windows) - general graphical image editor
  • ImageMagick (all platforms) - https://www.imagemagick.org/script/download.php - command-line image editor, useful for batch processing and scripting
  • Inkscape - editor for PDF files

AI tools can also edit images with minimal prompting.

Examples

Convert PDF to PNG (Linux):

gs -sDEVICE=pngalpha   -o output.png -r600 -dDownScaleFactor=3 input.pdf

Convert PDF to JPEG using ImageMagick and crop the page:

montage -colorspace sRGB -density 300 -geometry 452x+0+0 -tile 5 -crop 82x87%+130+126 input.pdf  output.jpg

Extract PSD layers using ImageMagick (CMYK to sRGB, one layer per file):

for i in *.psd; do  convert  $i -profile /usr/share/color/icc/colord/sRGB.icc   `basename $i .psd`.png; done;

Tile images in the order shown by ls. Rename the files if you need a specific order.

montage -colorspace sRGB -density 300 *.png -tile 6 -background transparent ../tokens.png

Extract all images from a PDF (Linux):

pdfimages my.pdf prefix-

Online tools

Extract images from PSD files (Adobe Photoshop's file format):

https://www.photopea.com/

Create seamless backgrounds (for tiled wallpaper):

https://www.imgonline.com.ua/eng/make-seamless-texture.php

Download game assets from Tabletop Simulator:

https://www.npmjs.com/package/ttsbackup

Community contributions

  • This Python script shows how to make card sprite sheets for BGA from a PDF with one card per page. It:
  • reads the pages from a PDF document
  • crops each page to exclude bleed areas and other unwanted content
  • removes duplicate images by comparing histograms
  • converts images to a target resolution
  • assembles the resulting images into a single sprite sheet with a specified number of rows and columns
  • saves the result in any format that Pillow supports (e.g. JPEG or PNG)