When creating assets for the Marketplace, there are certain guidelines you should follow to provide the best experience for the purchaser, reduce sendbacks during approvals, optimize performance, and minimize refunds.
If you haven’t already, please take a moment to review Best Practices for Files on Roll20. The steps included will help minimize lag, make it easier to use images on the Tabletop, and ensure that images are clear and readable.
Image Resolution Guidelines
Static images uploaded to Roll20 should be uploaded at a resolution of somewhere between 72-150 PPI (pixels per inch) whenever possible to ensure smooth performance for purchasers. This is a common web-friendly default resolution that will ensure your products aren't slowing down the games of purchasers with slower connections or older hardware.
For Animated images (GIF and WEBM) you will want to target a smaller image resolution than 72 PPI. Image lag is more noticeable with animated images than with static images. How much you downsize your image resolution will depend on the visual quality of the image as it appears on the Roll20 Tabletop, so you will need to test your assets to find what works best with your art.
Image Dimensions & File Type Guidelines
When creating art content that is expected to be placed on the Roll20 Tabletop, keep in mind that the default square grid drawn over a Page has cell units that are 70 pixels wide by 70 pixels high. Use image dimensions that can be evenly divided by 70 unless you're preparing content that doesn't use a square grid. This will prevent your art from becoming distorted when the Customer places your image assets on the Tabletop.
You will want to use heights and widths that are subdivided by the pixel estimates we have listed below if you're creating content for other grid types (Hex, Isometric, and Dimetric).
These dimension recommendations are for static images. Similar to image resolution, you will want to experiment with dimensions for animated images to mitigate lag.
Token Specs
We recommend creating Token art at a 4x scale to prevent image pixelation when zooming in on a Page past 100% and to allow GMs and Players to enlarge artwork on the Roll20 Tabletop without degradation.
Image Dimensions for Tokens
| Grid Type | Grid Cell Pixel Dimensions | Pixel Scale for Token Art (per grid cell) |
|---|---|---|
| Square Grid | 70px wide by 70px tall | 280px wide by 280px tall |
| Vertical Hexagon Grid ⬢ | 81px wide by 94px tall | 324px wide by 376px tall |
| Horizontal Hexagon Grid ⬣ | 94px wide by 81px tall | 376px wide by 324px tall |
| Isometric Grid | ~121px wide by 70px tall | ~484px wide by 280px tall |
| Diametric Grid | 140px wide by 70px tall | 560px wide by 280px tall |
Token File Types
Static: For static Tokens, we recommend creating PNGs with an Alpha Channel to support transparency/translucency. Files should endeavor to be smaller than 5MB as a best practice and should be no larger than 10MB, in general, to prevent performance loss on various customer hardware and internet connections. An uploaded image can be as large as 20MB for Plus and Pro users, but the process itself takes up space so we recommend aiming for under 20MB.
Animated: For animated Tokens, we recommend creating WEBMs if you need translucency in your Token graphic as well as transparency. Use the GIF file type if all you need is transparency in your animated Token.
Map Pack Specs
We recommend creating Map art at a 2-times scale to prevent image pixelation when zooming in on a Page past 100%.
Image Dimensions for Map Art
| Grid Type | Grid Cell Pixel Dimensions | Pixel Scale for Map Art (per grid cell) |
|---|---|---|
| Square Grid | 70px wide by 70px tall | 140px wide by 140px tall |
| Vertical Hexagon Grid ⬢ | 81px wide by 94px tall | 162px wide by 188px tall |
| Horizontal Hexagon Grid ⬣ | 94px wide by 81px tall | 188px wide by 162px tall |
| Isometric Grid | ~121px wide by 70px tall | 242px wide by 140px tall |
| Diametric Grid | 140px wide by 70px tall | 280px wide by 70px tall |
If your map is going to be larger than 30 by 30 grid squares (4200 pixels wide by 4200 pixels high), you may want to consider offering one image asset in your Art Pack that contains the entire map AND additional image assets that are subdivisions of that same map. That way the subdivisions can be pieced together on the Tabletop to build the whole map. Having smaller map subdivisions gives the GM options to help mitigate lag if they, or any of their players, are dealing with a poor internet connection or playing on old hardware. Higher resolution maps may also result in longer upload times to Art Packs.
Map File Types
We recommend creating JPGs whenever possible. PNGs should only be used if transparency or translucency is required in your map. For animated map assets, create GIFs or WEBM files.
We don't recommend including an entire map graphic as an animated file. Isolate the elements on the map that will be animated as their own smaller animated art assets where the Customer can then overlay the animated pieces over a JPG of the full-sized map. Animated maps take longer to upload to Art Packs, and fully animated maps should not exceed 2k resolution or they run the risk of failing to upload/experiencing performance degradation.
Map Tile Specs
We recommend creating your Map Tiles at a 2-times scale to prevent image pixelation when zooming in on a Page past 100%.
Image Dimensions for Map Tiles
| Grid Type | Grid Cell Pixel Dimensions | Pixel Scale for Map Tiles (per grid cell) |
|---|---|---|
| Square Grid | 70px wide by 70px tall | 140px wide by 140px tall |
| Vertical Hexagon Grid ⬢ | 81px wide by 94px tall | 162px wide by 188px tall |
| Horizontal Hexagon Grid ⬣ | 94px wide by 81px tall | 188px wide by 162px tall |
| Isometric Grid | ~121px wide by 70px tall | 242px wide by 140px tall |
| Diametric Grid | 140px wide by 70px tall | 280px wide by 70px tall |
Map Tile File Types
Map Tiles should be created as JPGs unless they contain furniture or other decorations that will sit on top of other tiles and require transparent/translucent elements in the image. For those instances, create PNGs; however, use them mindfully. Multiple PNGs on the Tabletop place a much heavier burden on the processing of the players' systems than multiple JPG files.
A Note About Building Map Tiles
Map Tiles are the hardest image assets to create correctly in regards to aligning and snapping properly to the Roll20 Tabletop grid. If this is your first art set on the Marketplace, we recommend testing your Tile Sets in a Roll20 game prior to submitting them for approval.
Token Marker Specs
Each Token Marker icon should be 512 pixels wide by 512 pixels high. When they are applied to a Token on the Roll20 Tabletop, they'll be resized to 48 by 48 pixels or 24 by 24 pixels respectively.
All Token Marker images should be expected to be visible at these reduced sizes. Token Markers that are muddy or unreadable will not be approved for the Roll20 Marketplace.
File Type: PNG
Note: Animated Token Marker images are currently not available.
Card Deck Specs
Image Dimensions: Maximum Height or Width is 2000 pixels. Any rectangular dimension ratio is acceptable. We recommend matching the dimensions for both the front and back images being used for the same deck. That sizing consistency will prevent unexpected scaling and positioning issues when flipping Cards over on the Tabletop.
File Type: PNG files are recommended for static images, especially if there is any text that is to be read off the card image. Animated image file types (GIF and WEBM) can be used for Card fronts and backs.
Character Portrait (Avatar) Specs
(Credit to Partner GalefireRPG)
Portrait Image Dimensions: Maximum Width is 250 pixels. Any rectangular dimension ratio is acceptable; however, when used in the Portrait element of a Character Journal Item, an icon-sized version of that image will display in the Chat. A very tall Portrait image will not be very readable in the Chat.
(An example of the above Portrait image displayed in Text Chat)
File Type: JPG, PNG, GIF and WEBM
Handout Image Specs
(An example of an expanding Handout image from Roll20's The Festival of Emeralda Adventure. Notice that the image only enlarges as far as it can still fit within the browser window.)
Image Dimensions: The image dimensions for a Handout image can be any rectangular dimension ratio. When the image is clicked, it will display in Lightbox mode centered and viewed at 100% scale if the image dimensions are smaller than the browser window. If it's larger than the browser window at 100%, it will be resized (keeping its aspect ratio) to fit within the confines of the browser window. Landscape formatted images will fill up more screen space when viewed on most monitors and displays.
File Type: JPG, PNG, GIF, and WEBM
Rollable Table Image Specs
(Credit to Partner: Evil Hat Productions)
Image Dimensions: Depending on what you're using the Rollable Table for, you should follow the dimensions for either Tokens, Maps, or Map Tiles. If you're creating art for custom dice faces to ONLY show up in Text Chat, those dimensions are 30 by 30 pixels.
File Type: JPG, PNG, GIF and WEBM
Marketplace Item Cover Images Specs
Image Dimensions: 512 pixels wide by 512 pixels high
File Type: JPG, PNG, GIF and WEBM
If your image is not 512 px wide by 512 px high when you upload it as your listing's cover image, the Marketplace will add blurred borders to the sides or top to prevent image distortion.
Game Details Banner Image Specs
Banners images on the Game Details page are only applied with Module products, not Addons.
Image Dimensions: 750 pixels wide by 350 pixels high
File Type: JPG, PNG, Static GIF