How to Import & Scale Custom Animated Maps in Foundry VTT Without Lag

How to Import & Scale Custom Animated Maps in Foundry VTT Without Lag

Quick Answer
TL;DR

To import a custom animated map into Foundry VTT without creating unnecessary lag, use a web-friendly video file such as WebM or MP4, create the scene before adding walls and lighting, set the background video as the scene image, then match the scene dimensions and grid size to the map's intended scale. Foundry recommends animated maps at about 30 FPS or less and loosely suggests keeping video map files around 50 MB or below when practical. Preload large scenes before activating them, avoid oversized source dimensions, and test the finished scene with lighting and tokens enabled before game night.

You find an animated dungeon map with drifting fog, flickering torches, running water, and glowing runes. It looks perfect in the preview. You import it into Foundry VTT, add walls, turn on lighting, activate the scene, and suddenly one player is staring at a loading screen while another says their browser feels like it is running at ten frames per second.

Animated maps are not automatically bad for Foundry. The problem is usually the combination of video size, pixel dimensions, bitrate, scene configuration, lighting, modules, and the hardware or connection used by the least powerful player at the table.

The goal is not to make an animated map as small as possible. It is to give Foundry enough quality to look good at tactical zoom while avoiding video data and scene complexity your players cannot meaningfully use.

Which Animated Map Format Should You Use in Foundry VTT?

Foundry currently supports WebM, MP4, and M4V for video assets. For an animated scene background, WebM is usually an excellent first choice because it can deliver high visual quality at a relatively small file size.

MP4 is also useful, especially when your map creator already provides a well-compressed H.264 version. What matters more than the extension alone is how the file was encoded.

Format Best Use What to Watch
WebM Animated backgrounds and tiles Excellent quality-to-size ratio, encoding quality still matters
MP4 Broadly compatible animated maps Keep bitrate under control
M4V Supported alternate video format Usually less common in map packs

For transparent animated tiles, WebM is particularly useful. For a full map background, transparency is usually unnecessary, so choose the version that gives you the best quality at the smallest practical file size.

How Do You Import an Animated Map Into Foundry VTT?

The cleanest workflow is to establish the background and grid before you build the rest of the encounter.

Animated Map Import Workflow

1. Open the Scenes Directory. Create a new scene and give it a useful name.

2. Choose the animated file as the Background Image. Use Foundry's file picker to upload or select your WebM, MP4, or M4V file.

3. Save the scene once. Foundry can detect the source image or video dimensions and use them as the initial scene dimensions.

4. Open Grid Settings. Set the grid type, grid size in pixels, grid scale, and offsets.

5. Confirm alignment across the entire map. Do not judge alignment from a single square near the center.

6. Add walls, lights, tokens, sounds, and effects only after the scale is correct.

That last step prevents one of the most annoying Foundry problems: resizing the scene after you have already spent time building walls and lighting. Foundry will attempt to reposition placeables when scene dimensions change, but large changes can still create cleanup work.

How Do You Scale the Animated Map to the Correct Grid?

Foundry's grid is based on pixels per grid space. Its current default is 100 pixels per square, with a minimum of 50 pixels. Maps commonly use values such as 70, 100, 140, or 200 pixels per square.

If you know the map's pixel dimensions and number of squares, you can calculate the intended grid size directly.

Map Width in Pixels ÷ Number of Columns = Grid Size

If a 3000-pixel-wide map contains 30 grid columns, its intended grid is 100 pixels per square.

Illustrative Example: Scaling a 30×30 Animated Map

Assume your animated map is 3000×3000 pixels and represents a 30×30 encounter.

3000 ÷ 30 = 100 pixels per grid square.

Set the Foundry grid size to 100 pixels. If each square represents 5 feet in your game, set the grid distance to 5 feet. If the artwork is gridless, you can leave Foundry's grid visible while aligning it, then reduce its opacity or hide it once the scale is correct.

If the map has a visible baked-in grid, use the Grid Configuration Tool to line Foundry's grid up with the artwork. Check the top-left, center, bottom-right, and other edges. A grid that looks aligned in the center but drifts near the edges usually means the scale is wrong, not just the offset.

What Animated Map Settings Reduce Lag the Most?

Start with the video itself. Foundry's media guidance recommends video assets at approximately 30 FPS or less. It also loosely recommends trying to keep video map files around 50 MB or below so the scene can be distributed to connected players more comfortably.

That 50 MB figure is a guideline rather than a hard upload restriction. A larger file can work, particularly when the scene is preloaded or hosted on fast infrastructure. But larger videos create more data that each remote player may need to receive.

Setting Good Starting Point Why It Matters
Frame rate 30 FPS or less Reduces unnecessary video workload
Video file size Around 50 MB or less when practical Makes distribution to players easier
Grid resolution 100 px/square is a strong baseline Balances map detail and texture size
Audio Separate from map video Avoids inflating the background video

If the original animated map includes audio, consider using a silent map video and handling ambient sound through Foundry's audio system instead. That gives you independent volume control and can reduce the video file's footprint.

Does 4K Make an Animated Map Too Heavy for Foundry?

Not automatically. A 4K-class animated map can work well when it is efficiently encoded and the scene does not pile excessive effects on top of it.

The bigger risk comes from extremely large source dimensions. Foundry notes that background images with very high pixel dimensions can exceed the maximum texture size supported by a player's hardware. Its troubleshooting guidance says this limit is often around 8,000 pixels in one dimension on older systems and around 16,000 pixels on newer systems.

That does not mean you should target those limits. It means a normal encounter map at 3000, 4000, or similar pixel dimensions is very different from importing a sprawling 12,000-pixel animated city as one scene.

If you are also choosing between different static resolutions, our battle map resolution guide explains why pixel dimensions and pixels per grid square matter more than the DPI label attached to a file.

How Do You Preload an Animated Scene Before Players Enter It?

Preloading is one of the easiest ways to make a large scene transition feel cleaner.

Instead of activating the scene the moment the players reach the dungeon, preload it while they are still roleplaying, traveling, or finishing the previous encounter. That gives client devices time to receive the scene assets before the map becomes the center of attention.

This does not make a badly optimized video free to render, but it can reduce the obvious pause caused by everyone downloading a large animated background at the same moment.

A Better Session Transition

Preload the animated boss arena while the party is still exploring the room before it. When they open the final door, activate the already-prepared scene instead of making every player begin downloading it at the dramatic reveal.

Why Do Animated Foundry Scenes Still Lag After the Map Is Optimized?

Because the background map is only one layer of the scene.

A well-compressed animated map can still sit underneath dozens of walls, dynamic lights, vision calculations, animated spell effects, overhead tiles, weather, tokens, modules, and browser extensions. At some point the problem is not the map file. It is the entire canvas workload.

Too Many Animated Elements

If the floor is animated, the torches are animated, the rain is animated, six spell templates are animated, and twenty tokens have animated effects, each individually reasonable choice can combine into a heavy scene.

Excessive Dynamic Lighting

Complicated wall networks and many light sources add work on top of the moving background. Build the walls your encounter needs rather than tracing every decorative crack or tiny object.

Hardware Acceleration Problems

Foundry relies on hardware acceleration for smooth rendering. A player with hardware acceleration disabled can experience black or gray scenes and poor performance even when everyone else is running the same map correctly.

Outdated or Conflicting Modules

Foundry lists module conflicts as a common cause of scene problems. If one specific scene behaves strangely after an update, test it in a safe or reduced-module configuration before rebuilding your map from scratch.

Why Do Most DMs Get Animated Map Setup Wrong?

The most common mistake is adding complexity before establishing scale.

The GM imports the map, eyeballs the grid, adds twenty walls, places lights, sets up tokens, and only then notices the grid drifts by half a square near the bottom of the map. Fixing the scene dimensions at that point can move the work that was already placed.

The second mistake is treating animation as an excuse to animate everything. A moving map is already providing environmental motion. It does not need every visual-effects module switched on at maximum density.

The third mistake is testing only on the GM's machine. Your desktop may have a strong GPU and a wired gigabit connection. One player may be joining from an older laptop over Wi-Fi. The real performance target is the weakest reasonable client in the group.

Optimize for the scene your players actually receive, not the preview running on the GM's computer.

What Should You Test Before Game Night?

Treat the finished scene like an encounter you are rehearsing.

  • Scene load: Open the scene as a player account and confirm the video starts normally.
  • Grid alignment: Check multiple corners and edges, not just the center.
  • Token movement: Move several tokens through the busiest part of the map.
  • Lighting: Test with the final walls and lights enabled.
  • Zoom and pan: Move rapidly around the scene at the zoom levels players will use.
  • Preload: Confirm the scene can be preloaded before activation.
  • Weakest device: Test on a less powerful machine or ask the player with the oldest hardware to open it before the session.

If the animated scene struggles, simplify one layer at a time. Disable optional effects first, reduce dynamic lights next, test modules, then consider a smaller or more efficiently encoded map file. That gives you a much better diagnosis than immediately blaming animation itself.

Frequently Asked Questions

Can Foundry VTT use animated maps?

Yes. Foundry supports WebM, MP4, and M4V video assets for animated maps, backgrounds, and tiles. The best experience depends on the file's resolution, bitrate, frame rate, and the complexity of the rest of the scene.

Is WebM or MP4 better for animated Foundry maps?

Both are supported. Foundry generally recommends WebM for animated map scenes because it can provide strong visual quality with smaller files. A well-encoded MP4 can still work very well.

How large should an animated Foundry map file be?

Foundry loosely recommends trying to keep video map files around 50 MB or less for easier distribution to players. This is a guideline rather than a hard limit, and larger files can work with adequate hosting, bandwidth, and preloading.

What frame rate should an animated battle map use?

Foundry recommends video files at approximately 30 FPS or less. Environmental animation rarely needs a very high frame rate to look convincing, so extra frames can increase workload without adding much value at the table.

How do I know what grid size to use in Foundry?

Divide the map's width in pixels by the number of grid columns. A 3000-pixel-wide map with 30 columns uses a 100-pixel grid. Foundry's current default is 100 pixels per grid square.

Why does my animated map lag even though the file is small?

The map may not be the main bottleneck. Dynamic lighting, walls, tokens, animated effects, modules, browser settings, hardware acceleration, and client hardware can all affect the scene. Test those layers separately before re-encoding the map.

Should I preload animated maps in Foundry?

Yes, especially for larger scenes used by remote players. Preloading gives client devices time to receive assets before you activate the scene, which can make the transition into the encounter feel much smoother.

From The Forge
Build Better Foundry Encounters From the Start

Explore high-resolution battle maps designed for tactical VTT play, clear grid scaling, and fast encounter preparation.

Browse Battle Maps →

Sources

Foundry Virtual Tabletop Media Optimization Guide
Foundry Virtual Tabletop Scenes
Foundry Virtual Tabletop Content Creation Style Guide
Foundry Virtual Tabletop Troubleshooting Scene Loading Issues