Difference between revisions of "Image Best Practices for Roll20"
From Roll20 Wiki
m (→Troubleshooting Image Problems) |
Stephen C. (Talk | contribs) |
||
(16 intermediate revisions by 10 users not shown) | |||
Line 1: | Line 1: | ||
+ | {{revdate}}{{HCbox| {{hc|articles/360037256634-Best-Practices-for-Files-on-Roll20 Here}} }} | ||
+ | {{Merge-Split|[[Best Practices for Files on Roll20]]|April 2022}} | ||
This is a rundown of several image practices that’ll ensure the optimal playing experience. Following this guideline should cut down on image lag, make it easier to use images on the tabletop, and should ensure that your images are clear and readable. | This is a rundown of several image practices that’ll ensure the optimal playing experience. Following this guideline should cut down on image lag, make it easier to use images on the tabletop, and should ensure that your images are clear and readable. | ||
+ | |||
+ | {{notebox|'''Note:''' Are you a [[Marketplace]] Creator? Review {{hc|articles/360037257274-Creating-Marketplace-Assets Creating Marketplace Assets}} for image guidelines on providing the best experience for the end-user.}} | ||
+ | |||
== Web-Friendly vs. Print Images == | == Web-Friendly vs. Print Images == | ||
− | If you’re playing from a commercial adventure pack, there’s a high chance you’re working from a PDF file which is often published with the intended purpose of being printed out later by the user. In order for graphics to be readable and crisp for print, the image resolution - the DPI (Dots per inch) has to be kept rather high. The standard minimum resolution for a printed image is roughly 300 DPI. The higher the DPI, the larger the image’s file size is and the harder a processor has to work to display the image. The graphics contained within a PDF such as maps, character portraits and handouts aren’t designed for web, they’re designed for print. We recommend that they shouldn’t be dragged directly from a PDF file and into a Roll20 | + | If you’re playing from a commercial adventure pack, there’s a high chance you’re working from a PDF file which is often published with the intended purpose of being printed out later by the user. In order for graphics to be readable and crisp for print, the image resolution - the DPI (Dots per inch) has to be kept rather high. The standard minimum resolution for a printed image is roughly 300 DPI. The higher the DPI, the larger the image’s file size is and the harder a processor has to work to display the image. The graphics contained within a PDF such as maps, character portraits and handouts aren’t designed for web, they’re designed for print. We recommend that they shouldn’t be dragged directly from a PDF file and into a Roll20 Game. |
− | Image resolution is meaningless to how an image displays on the screen. The deciding factor of how an image displays on screen is determined by the dimensions of the image. A 500 pixel high by 300 pixel wide image will display on screen as 500 pixels by 300 pixels regardless if it’s 75 DPI, 200 DPI, 600 DPI and so on. When you’re working with images over the internet, the higher the DPI means there’s more needless data that needs to be transferred which will slow your | + | Image resolution is meaningless to how an image displays on the screen. The deciding factor of how an image displays on screen is determined by the dimensions of the image. A 500 pixel high by 300 pixel wide image will display on screen as 500 pixels by 300 pixels regardless if it’s 75 DPI, 200 DPI, 600 DPI and so on. When you’re working with images over the internet, the higher the DPI means there’s more needless data that needs to be transferred which will slow your game down. |
− | If you want images to run smoothly in Roll20, keep image resolution low. The standard for web has been 72/75 DPI since the dawn of graphical web sites. Anywhere between the 70-150 DPI range should be adequate for your | + | If you want images to run smoothly in Roll20, keep image resolution low. The standard for web has been 72/75 DPI since the dawn of graphical web sites. Anywhere between the 70-150 DPI range should be adequate for your game images. |
== File Types == | == File Types == | ||
− | The three available image file types that can be imported and used in Roll20 are JPG, GIF and PNG. Below is a chart comparing the file formats against each other: | + | === Image Files === |
+ | The three available image file types that can be imported and used in Roll20 are JPG, GIF and PNG. Image uploads have a maximum upload size of 10MB(Pro/Plus) & 5MB(Free). Below is a chart comparing the file formats against each other: | ||
{| class="wikitable" style="text-align:center" | {| class="wikitable" style="text-align:center" | ||
− | |+File Type Guide | + | |+Image File Type Guide |
| File Type || Transparency Availability || Translucency Availability || File Size || File Type Pros || File Type Cons | | File Type || Transparency Availability || Translucency Availability || File Size || File Type Pros || File Type Cons | ||
|-! | |-! | ||
| JPG || No || No || Average || Smooth gradients, small file size, preferred file type in Roll20 || No transparency options, quality can suffer when heavily compressed | | JPG || No || No || Average || Smooth gradients, small file size, preferred file type in Roll20 || No transparency options, quality can suffer when heavily compressed | ||
|-! | |-! | ||
− | | GIF || Yes || No || Smallest || Palette swatch control, great for pixel art || Poor quality with gradients, not advised for realistic images, animated gifs will | + | | GIF || Yes || No || Smallest || Palette swatch control, great for pixel art || Poor quality with gradients, not advised for realistic images, however animated gifs will animate on the Roll20 virtual table top. |
|-! | |-! | ||
− | | PNG || Yes || Yes || Largest || Lossless compression - high quality images || File size inflates when using extensive alpha channel work, large files can use up a lot of system resources | + | | PNG || Yes || Yes || Largest || Lossless compression - high quality images || File size inflates when using extensive alpha channel work, large files can use up a lot of system resources. Does everything except animations that a GIF can do, plus more. Ideal format for solid drawings, images with large swaths of exactly the same color. |
|} | |} | ||
− | If you have graphics that don’t require any transparency or translucency, stick with JPG files. The GIF file type is handy if you want just a simple aliased cutout image for token objects. PNGs, | + | === Animation Files === |
+ | |||
+ | Animations are supported on Roll20 in three file types GIF, mp4, webm. Image uploads have a maximum upload size of 10MB(Pro/Plus) & 5MB(Free). Below is a chart comparing the file formats against each other: | ||
+ | |||
+ | {| class="wikitable" style="text-align:center" | ||
+ | |+Animation File Type Guide | ||
+ | | File Type || Transparency Availability || Translucency Availability || File Size || File Type Pros || File Type Cons | ||
+ | |-! | ||
+ | | GIF || Yes || No || Small, but Inefficient || Palette swatch control, great for small or simple animations. GIF files are typically smaller than other animation types. || Because they store more data per animation frame than other formats, large animations perform poorly. Poor quality with gradients, not advised for realistic animations. | ||
+ | |-! | ||
+ | | mp4 || No || No || Large, better efficiency || These are actually video file formats, which translate to better experience. Transparency (called an Alpha channel) is not supported by this file type. Animated maps and backgrounds work well in this file type. Once uploaded to Roll20, these files will not retain audio from the original file. || No transparency options, quality can suffer when heavily compressed | ||
+ | |-! | ||
+ | | webm || Yes || Yes || Small, most efficient || Engineered for use on the web. Supports transparency and translucency (with 8-bit Alpha Channel). As much quality as mp4 in a much smaller size || This file type is not as universal as mp4 or GIF. | ||
+ | |} | ||
+ | |||
+ | If you have graphics that don’t require any transparency or translucency, stick with JPG images files. For animations, the mp4 files will be more available, but converting mp4 to webm will reduce the time it takes to put files on Roll20. The GIF file type is handy if you want just a simple aliased cutout image for token objects, with or with animation. PNGs can also work for token objects or images requiring transparency, but animated PNG files are not supported. As PNGs are more flexible than GIFs, sometimes they will have a larger file size for what looks to the eye like the same image. | ||
+ | |||
+ | If your software controls it, you may be able to change your image from "full color" or "rgb" to "palette" or "indexed". The latter only has a limited number (usually 256) of colors, and is the only format that GIF supports. This is why GIF files are smaller; PNG files using the same type of palette will be roughly the same size as GIF images (or, if anything a bit smaller). Most PNG files you create will be rgb, saving more data per pixel than GIF, and thus being bigger-- but also preserving more image integrity. | ||
[[Image:File_Type_ex.jpg|frame|center|1px|Transparency with JPG, GIF, and PNG Files]] | [[Image:File_Type_ex.jpg|frame|center|1px|Transparency with JPG, GIF, and PNG Files]] | ||
Line 47: | Line 70: | ||
| Hex Unit (Horizontal)* || ~94px || ~81px | | Hex Unit (Horizontal)* || ~94px || ~81px | ||
|-! | |-! | ||
− | | Max Character Portrait Size || 250px || | + | | Max Character Portrait Size || 250px || 512px |
|-! | |-! | ||
− | | | + | | Game Details Icon || 300px || 512px |
+ | |-! | ||
+ | | Rollable Table Images (Text Chat) || 30px || 30px | ||
|} | |} | ||
* The hex grid is mathematically drawn, so the pixel height and width for a single hex unit is an approximation | * The hex grid is mathematically drawn, so the pixel height and width for a single hex unit is an approximation | ||
== Token Images == | == Token Images == | ||
− | Token images, due to their small size, are probably best suited for PNG formats (if you want transparency) for best quality. If you’re not relying on a square or hex grid to move tokens about the tabletop, you don’t need to concern yourself about the actual dimensions of the image. If you | + | Token images, due to their small size, are probably best suited for PNG formats (if you want transparency) for best quality. If you’re not relying on a square or hex grid to move tokens about the tabletop, you don’t need to concern yourself about the actual dimensions of the image. If you ''are'' using a grid; however, you’ll want to make sure your image has enough transparent padding. The reason for doing this is that an image when dropped onto a gridded tabletop will warp the dimensions of the image to best sit inside a single grid unit. This process might dramatically change the proportions of your image. For instance, if you're using tokens that fill a 1 x 1, 2 x 2 or 3 x 3 unit space, you'll want to make sure that the final dimensions of the image are the same for both height and width. If you have an oblong token, you'll want to make sure that the final dimension's of either the width or height is exactly double or perhaps triple of the other. |
− | + | ||
− | + | ||
== Troubleshooting Image Problems == | == Troubleshooting Image Problems == | ||
Line 65: | Line 88: | ||
'''Solution:'''<br/> | '''Solution:'''<br/> | ||
− | This is normally due to file size of any given image in a | + | This is normally due to file size of any given image in a game. Check the file size of the images you’re using for your game. If any image is over a megabyte in size, we’d recommend checking its image resolution and decrease it in an image editing software package. Also, make sure you’re using the right file type to minimize file size. Only use PNGs when you need transparencies*. |
− | + | * Unless you are using monochrome PNGs, then file size / bandwidth performance rocks. PNG is the smallest possible file format using GIMP & 1 bit color depth. A 7000x7000 empty map is 7k as PNG, 32k as GIF, 281kb as JPG. It gets worse after adding actual data. A more practical comparison for an actual map is 92k (png), 206kb (gif), 729kb(jpg). For my AD&D 3.5 game, I plan image size around the 70x70 pixel unit square & size my maps to multiples thereof. After completing the map, I convert it to 1-bit indexed color. I create a new page where the units are image_x / 70 * image_y / 70, & drag the picture over. It flies over & I have seen no performance problems yet. Oh yeah, I am using DSL. | |
Line 80: | Line 103: | ||
'''Common Problem:'''<br/> | '''Common Problem:'''<br/> | ||
“When I dropped my token art onto the table, the dimensions of the image got really messed up.”<br/> | “When I dropped my token art onto the table, the dimensions of the image got really messed up.”<br/> | ||
− | |||
'''Solution:'''<br/> | '''Solution:'''<br/> | ||
− | Sounds like your image | + | Sounds like your image you are using for your token didn't have enough padding. Make sure you add padding around your Token graphics so that they’re square or are using the appropriate dimensions to place on the grid. For example, a creature that you want to take up a 2x1 grid area, make sure one dimension of the image is padded out to be exactly double of the other. This will ensure that your image’s proportions are retained and you’ll be able to view the image as expected once on the grid. |
+ | =Related Pages= | ||
+ | * [[Storage Allocation]] | ||
+ | * [[Optimizing Roll20 Performance]] | ||
+ | =Help Center= | ||
+ | * [https://help.roll20.net/hc/en-us/articles/4422710034455-Guidelines-for-Image-Resolution-and-File-Types Guidelines for Image Resolution and File Types ] | ||
+ | <br> | ||
[[Category:Docs]] | [[Category:Docs]] | ||
+ | [[Category:Troubleshooting]] |
Latest revision as of 22:13, 30 April 2023
Page Updated: 2023-04-30 |
Attention: This page is community-maintained. For the official Roll20 version of this article, see the Help Center for assistance: Here .
Page could be merged/split with:Best Practices for Files on Roll20. (April 2022) |
This is a rundown of several image practices that’ll ensure the optimal playing experience. Following this guideline should cut down on image lag, make it easier to use images on the tabletop, and should ensure that your images are clear and readable.
Note: Are you a Marketplace Creator? Review Creating Marketplace Assets for image guidelines on providing the best experience for the end-user. |
Contents |
[edit] Web-Friendly vs. Print Images
If you’re playing from a commercial adventure pack, there’s a high chance you’re working from a PDF file which is often published with the intended purpose of being printed out later by the user. In order for graphics to be readable and crisp for print, the image resolution - the DPI (Dots per inch) has to be kept rather high. The standard minimum resolution for a printed image is roughly 300 DPI. The higher the DPI, the larger the image’s file size is and the harder a processor has to work to display the image. The graphics contained within a PDF such as maps, character portraits and handouts aren’t designed for web, they’re designed for print. We recommend that they shouldn’t be dragged directly from a PDF file and into a Roll20 Game.
Image resolution is meaningless to how an image displays on the screen. The deciding factor of how an image displays on screen is determined by the dimensions of the image. A 500 pixel high by 300 pixel wide image will display on screen as 500 pixels by 300 pixels regardless if it’s 75 DPI, 200 DPI, 600 DPI and so on. When you’re working with images over the internet, the higher the DPI means there’s more needless data that needs to be transferred which will slow your game down.
If you want images to run smoothly in Roll20, keep image resolution low. The standard for web has been 72/75 DPI since the dawn of graphical web sites. Anywhere between the 70-150 DPI range should be adequate for your game images.
[edit] File Types
[edit] Image Files
The three available image file types that can be imported and used in Roll20 are JPG, GIF and PNG. Image uploads have a maximum upload size of 10MB(Pro/Plus) & 5MB(Free). Below is a chart comparing the file formats against each other:
File Type | Transparency Availability | Translucency Availability | File Size | File Type Pros | File Type Cons |
JPG | No | No | Average | Smooth gradients, small file size, preferred file type in Roll20 | No transparency options, quality can suffer when heavily compressed |
GIF | Yes | No | Smallest | Palette swatch control, great for pixel art | Poor quality with gradients, not advised for realistic images, however animated gifs will animate on the Roll20 virtual table top. |
PNG | Yes | Yes | Largest | Lossless compression - high quality images | File size inflates when using extensive alpha channel work, large files can use up a lot of system resources. Does everything except animations that a GIF can do, plus more. Ideal format for solid drawings, images with large swaths of exactly the same color. |
[edit] Animation Files
Animations are supported on Roll20 in three file types GIF, mp4, webm. Image uploads have a maximum upload size of 10MB(Pro/Plus) & 5MB(Free). Below is a chart comparing the file formats against each other:
File Type | Transparency Availability | Translucency Availability | File Size | File Type Pros | File Type Cons |
GIF | Yes | No | Small, but Inefficient | Palette swatch control, great for small or simple animations. GIF files are typically smaller than other animation types. | Because they store more data per animation frame than other formats, large animations perform poorly. Poor quality with gradients, not advised for realistic animations. |
mp4 | No | No | Large, better efficiency | These are actually video file formats, which translate to better experience. Transparency (called an Alpha channel) is not supported by this file type. Animated maps and backgrounds work well in this file type. Once uploaded to Roll20, these files will not retain audio from the original file. | No transparency options, quality can suffer when heavily compressed |
webm | Yes | Yes | Small, most efficient | Engineered for use on the web. Supports transparency and translucency (with 8-bit Alpha Channel). As much quality as mp4 in a much smaller size | This file type is not as universal as mp4 or GIF. |
If you have graphics that don’t require any transparency or translucency, stick with JPG images files. For animations, the mp4 files will be more available, but converting mp4 to webm will reduce the time it takes to put files on Roll20. The GIF file type is handy if you want just a simple aliased cutout image for token objects, with or with animation. PNGs can also work for token objects or images requiring transparency, but animated PNG files are not supported. As PNGs are more flexible than GIFs, sometimes they will have a larger file size for what looks to the eye like the same image.
If your software controls it, you may be able to change your image from "full color" or "rgb" to "palette" or "indexed". The latter only has a limited number (usually 256) of colors, and is the only format that GIF supports. This is why GIF files are smaller; PNG files using the same type of palette will be roughly the same size as GIF images (or, if anything a bit smaller). Most PNG files you create will be rgb, saving more data per pixel than GIF, and thus being bigger-- but also preserving more image integrity.
If you need a large translucent map overlay: First, try to dial down the image resolution as low as possible and then try to uniformly scale the image dimensions to a size smaller than you actually need and enlarge it when it’s uploaded in Roll20. |
[edit] Working with Screen Space
When a GM hands out documents to their players around a physical table, often the item is written or printed on portrait-oriented paper. On a tablet, a person can simply flip the screen whether a graphic is either Portrait or Landscape. This can’t really be done on a computer monitor. When you want to create handouts or splash screens for use in Roll20, keep in mind that the average user often is working on a widescreen monitor with fixed screen resolution (not to be confused with image resolution). You want to create and plan out handouts and splash screens that’ll fit nicely on the collective user’s screen. Instead of thinking portrait, go with landscape orientation for notes, letters, and pictures or anything else that isn’t going to be a tabletop map.
Regarding screen resolution, get an idea of what your players are using. Are they working at desktop stations? Tablets? Laptops? Find a happy medium of screen resolution and work your graphic sizing around that, so no one will have to play with their zoom settings so they can view your images. Websites like w3schools.com keep yearly tallies of the average screen resolution over the years if you need a generic design guide.
[edit] Roll20 Image Dimensions
Here’s specific Roll20 dimensions for certain graphic elements.
UI Element | Pixel Width | Pixel Height |
Grid Square | 70px | 70px |
Hex Unit (Vertical)* | ~75px | ~88px |
Hex Unit (Horizontal)* | ~94px | ~81px |
Max Character Portrait Size | 250px | 512px |
Game Details Icon | 300px | 512px |
Rollable Table Images (Text Chat) | 30px | 30px |
* The hex grid is mathematically drawn, so the pixel height and width for a single hex unit is an approximation
[edit] Token Images
Token images, due to their small size, are probably best suited for PNG formats (if you want transparency) for best quality. If you’re not relying on a square or hex grid to move tokens about the tabletop, you don’t need to concern yourself about the actual dimensions of the image. If you are using a grid; however, you’ll want to make sure your image has enough transparent padding. The reason for doing this is that an image when dropped onto a gridded tabletop will warp the dimensions of the image to best sit inside a single grid unit. This process might dramatically change the proportions of your image. For instance, if you're using tokens that fill a 1 x 1, 2 x 2 or 3 x 3 unit space, you'll want to make sure that the final dimensions of the image are the same for both height and width. If you have an oblong token, you'll want to make sure that the final dimension's of either the width or height is exactly double or perhaps triple of the other.
[edit] Troubleshooting Image Problems
Common Problem:
“Why does is it taking Roll20 forever to zoom or pan across a map?"
“When I try to zoom in past 100%, my map just disappears.”
“Images are taking forever to appear for some or all of my players.”
Solution:
This is normally due to file size of any given image in a game. Check the file size of the images you’re using for your game. If any image is over a megabyte in size, we’d recommend checking its image resolution and decrease it in an image editing software package. Also, make sure you’re using the right file type to minimize file size. Only use PNGs when you need transparencies*.
* Unless you are using monochrome PNGs, then file size / bandwidth performance rocks. PNG is the smallest possible file format using GIMP & 1 bit color depth. A 7000x7000 empty map is 7k as PNG, 32k as GIF, 281kb as JPG. It gets worse after adding actual data. A more practical comparison for an actual map is 92k (png), 206kb (gif), 729kb(jpg). For my AD&D 3.5 game, I plan image size around the 70x70 pixel unit square & size my maps to multiples thereof. After completing the map, I convert it to 1-bit indexed color. I create a new page where the units are image_x / 70 * image_y / 70, & drag the picture over. It flies over & I have seen no performance problems yet. Oh yeah, I am using DSL.
Common Problem:
“My players are having a hard time reading my hand written note, why does the preview look so small?”
Solution:
Keep in mind that the limits of a player’s screen when you’re creating handouts. Try to make as much use of the available screen space. This normally means designing items that are wider than they are tall to best fit on a widescreen monitor.
Common Problem:
“When I dropped my token art onto the table, the dimensions of the image got really messed up.”
Solution:
Sounds like your image you are using for your token didn't have enough padding. Make sure you add padding around your Token graphics so that they’re square or are using the appropriate dimensions to place on the grid. For example, a creature that you want to take up a 2x1 grid area, make sure one dimension of the image is padded out to be exactly double of the other. This will ensure that your image’s proportions are retained and you’ll be able to view the image as expected once on the grid.
[edit] Related Pages
[edit] Help Center