You've found or created some great images for your campaign, but the files are huge! WebP images might be able to help with that. Whether you're trying to get a file under the upload size limit, or maximize your available storage space, many files can be optimized by converting them to WebP with little to no loss in quality.

Note: Roll20 currently supports static WebP only, animated WebP is not supported.

Your Mileage May Vary

Though converting to WebP will make your files smaller more often than not, it's not a 100% guarantee. Image compression is complicated, and in rare cases other file formats may prove more effective for specific images. The only way to know is to try it.

According to Google's FAQ, WebP files on average are 30% smaller than JPEGs of the same level of quality. Likewise, for PNG, lossless WebPs average 20% smaller file sizes.

How to Convert Your Images

There’s a lot of different ways to convert your files, from command line tools like FFmpeg, to online converts, to image editing programs. This article uses software that’s easy to use for non-technical users, cross-platform, and available completely for free: GIMP – Available for download here.

Once you’ve downloaded and installed the version for your system, you’ll be able to use it to open your image files. Launch GIMP, then simply drag and drop the image you’d like to convert into the window. Once open, follow these steps to export:

1. In the toolbar select “File” > “Export As…”, or press Ctrl + Shift + E
2. In the Export Image dialog, ensure “Select File Type (By Extension) is selected
   
3. Now you can change the file extension in the “Name:” field to “.webp” and click “Export” at the bottom.
   
   
4. In the Export Image as WebP dialog, we’ll be able to configure our export based on the file we’re converting.
   1. For PNGs or other lossless formats, we’ll want to select the “Lossless” checkbox, which disables the quality sliders.
      
      
   2. For JPEGs (.jpeg, .jpg) or other lossy formats, we’ll leave “Lossless” unchecked, and adjust the quality sliders as needed (more on that later, but the default value of 90 is usually a good starting point).
      
      
5. We can leave Source type set to “Default”, but go ahead and uncheck all three of the boxes below.
   
   These options allow us to exclude certain metadata from the files. Metadata is information about the image that doesn’t change what the image actually looks like, and since we want these files to be as small as possible we don’t want any of this extra information hanging around.
   
6. Click “Export” and wait for GIMP to save the file.

Once the file is saved, go to where it’s stored and compare the file size to the original. If it’s as small as you need it to be, great! Otherwise, keep reading below in “Adjusting Quality Settings” to get an idea of how you might be able to get further improvements.

Adjusting Quality Settings

Adjusting the quality settings in the Export Image as Webp dialog can help fine tune the export for specific files. If your files aren’t getting as small as you’d like or if they’re getting bigger (yikes!), this section might be able to help.

Note: In our testing, the “Alpha quality” slider had little to no impact on either the file size or quality, and as such the information below pertains only to the “Image quality” slider. Your experience with this value may differ. On images with no transparent pixels, it should have no effect.

Lossy → Lossy

Going from a lossy jpg to a lossy webp can be tricky, especially if you don’t know the quality settings used to convert. Some tools, such as ImageMagick’s “identify” command, may be able to provide an accurate value for quality, but usage of such tools is outside the scope of this article.

As a rule of thumb, when converting from JPEG, you’ll want to keep the WebP’s quality slider at or below the quality of the original image. When you set the quality above the original, it will almost always make the file larger, and it may also make the image look worse at the same time. If you don’t know the original quality, play around with this value and export a few copies to check the results (not just the file size, be sure to open the files and see if you can notice any visual artifacts).

You may need to export multiple times at different qualities to find the value that works best for each file to maximize quality and minimize file size.

Lossy → Lossless

Converting from a lossy image type to a lossless WebP is almost always going to increase file size, and it’s never going to make the image look better. We don’t recommend converting in this way.

Lossless → Lossy

Ideally, when we have a high quality image stored in a PNG or other lossless format, we’d be able to keep it that way. Lossless WebP images are visually indistinguishable from their originals, and usually they’re smaller, too! But sometimes they’re not small enough, and in those cases we may be able to switch to lossy WebP to squeeze out a little bit more of that size without losing too much in terms of image quality.

This is another case where the best way to find the best settings for a specific image is to play around with the quality value and export a few options. As above, 90 is a good starting point, and you can decrease the value from there to see how it changes the size and appearance of the resulting image.

But My Images Are Still Too Big!

Sorry about that!

It happens sometimes. Every once in a while you might find an image that just works better in a different format for one reason or another. Or maybe you have really big maps that get smaller, but not small enough to upload in one piece. In the latter case, we recommend using your software of choice to cut the image in half (or quarters, or as small as you need to) to upload in multiple pieces. Once in your library, you can reassemble the images on the VTT into one big map.

Exporting to WebP Directly

Some asset creation software, such as Megasploot’s DungeonDraft, allow exporting WebP files directly. When tested with DungeonDraft v1.0.4.7 (the latest as of this writing), we found that exporting to PNG then converting to WebP as above resulted in smaller files. The 8400x8400 pixel map we used for testing was exported at 18.3 MB, while the version converted losslessly from PNG weighed in at just 13.6 MB.

This is something that will vary from program to program and file to file, and may be improved in future versions of the software. For now, though it may add more steps to your asset preparation, it’s hard to argue with 25% smaller files.