Guidelines for Image Resolution and File Types

When creating assets for the Marketplace, there are certain guidelines you should follow to provide the best experience for the purchaser, reduce send-backs 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 there will help minimize image lag, make it easier to use images on the Tabletop, and ensure that images are clear and readable.

Image Resolution Guidelines

Static images (not animated) 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, older hardware, etc.

mceclip0.png

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 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.

Tip for converting your print assets for the Marketplace

Print media typically has a minimum image resolution of at least 300 DPI. On the VTT, the image dimensions (height and width) will dictate the viewing experience of your images on a monitor or display. Failing to adjust/lower the resolution of your images before uploading to the Marketplace will create file size bloat that can create performance issues due to in-game lag.

Image Dimensions & File Type Guidelines

When creating art content that is expected to be placed on the VTT, keep in mind that the default square grid drawn over a Page has cell units that are 70 pixels wide by 70 pixels high. Unless you're preparing content that doesn't use a square grid, use image dimensions that can be evenly divided by 70. This will prevent your art from becoming distorted when the Customer places your image assets on the Tabletop.

mceclip1.png

If you're creating content for other grid types (Hex, Isometric, and Dimetric), you'll want to use heights and widths that are subdivided by the pixel estimates we have listed below under their respective Art Pack Categories.

These dimension recommendations are for static images. Similar to image resolution, you will want to experiment with dimensions for animated images to mitigate lag.

Tokens

We recommend creating Token art at 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 VTT.

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
Hex Grid (Vertical) ~75px wide by ~88px tall ~300px wide by ~352px tall
Hex Grid (Horizontal) ~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

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. 

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.

Maps

We recommend creating Token art at 2x 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
Hex Grid (Vertical) ~75px wide by ~88px tall 150px wide by 176px tall
Hex Grid (Horizontal) ~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 VTT to build the full 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.

You could also consider creating a pack of Map Tiles (next section).

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.

Map Tiles

We recommend creating Token art at 2x 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 Art (per grid cell)
Square Grid 70px wide by 70px tall 140px wide by 140px tall
Hex Grid (Vertical) ~75px wide by ~88px tall 150px wide by 176px tall
Hex Grid (Horizontal) ~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

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.

Note: Map Tiles are the hardest image assets to create correctly in regards to aligning and snapping properly to the VTT grid. If this is your first art set on the Marketplace, you may consider creating a Token or Map Pack first to get the hang of things, and we recommend testing your Tile Sets prior to submitting for approval. 

Token Markers

Each Token Marker icon should be 512 pixels wide by 512 pixels high. When they are applied to a Token, 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 Decks

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 text that is expected to be read off the card image. Animated image file types (GIF and WEBM) can be used for Card fronts and backs.

Character Portraits

Portrait_Scale_Example.jpg

(Credit to Creator BlackLilithMoon)

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 Text Chat when a GM or Player is representing that Character and rolls or types something in Text Chat. A very tall Portrait image will not be very readable in Text Chat. 

Portrait_in_Text_Chat_Example.png

(An example of the above Portrait image displaying in Text Chat)

File Type: JPG, PNG, GIF and WEBM

Handout Images

Handout_Image_Example.gif

(An example of an expanding Handout image in the VTT 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 on the Handout, 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 Images

Rollable_Table_Token_Example.gif

(Credit to Creator: 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

Image Dimensions: 512 pixels wide by 512 pixels high

File Type: JPG, PNG, GIF and WEBM

Game Details Banner Images

Image Dimensions: 750 pixels wide by 350 pixels high

File Type: JPG, PNG, Static GIF

Was this article helpful?
6 out of 9 found this helpful