Performance Tips

Component.Studio loads your images into memory to enable real-time design editing and rendering. Following these tips will help keep the application fast and responsive.

Exclude Folders from the Inline Images Map

In the Image Manager, each folder has an option to Exclude from Inline Images Map. When enabled, images in that folder won't be included in the global images object that's available in templates and expressions. This is ideal for folders containing large background images or assets that you reference by direct URL rather than through the inline images system. Excluding these folders reduces the overhead of building and maintaining the images map, which speeds up template evaluation across all your designs.

Exclude Images from Designs

In the Design Properties panel, you'll find an Exclude Images selector that lets you choose image folders to exclude from a specific design. When a folder is excluded, images in that folder won't be loaded into memory or available for that design. This is useful when you have images that are only relevant to certain designs—for example, card artwork that isn't needed when editing a game board. By excluding irrelevant image folders, you reduce memory usage and improve canvas rendering performance for that design.

Right-Size Your Images

Uploading a 5000×5000 pixel image when you're only displaying it at 600×600 pixels wastes significant resources. That oversized image consumes ~100 MB of GPU memory when decoded, compared to just ~1.4 MB for a properly sized 600×600 version. Multiply this across dozens of images and you can quickly exhaust available memory, causing slowdowns, rendering glitches, or browser crashes. Before uploading, resize your images to match their intended display size (or at most 2× for high-DPI displays). Your browser and GPU will thank you.

Tip: A 600×600 image at 300 DPI prints at 2"×2" with excellent quality. You rarely need images larger than 1200×1200 pixels for most game components.

Avoid Uploading Excessive Images

Uploading hundreds or thousands of images to a web application like Component.Studio creates several problems. Each image must be fetched over the network, decoded by the browser, and stored in memory. With 1,000 images, you're looking at thousands of HTTP requests on page load, potentially gigabytes of memory usage, and significant strain on the rendering engine. The application may become unresponsive, and your browser tab could crash entirely. Instead, organize your assets thoughtfully: upload only what you need for active projects, remove unused images, and consider breaking very large games into multiple projects if necessary.