Navigation:  How-To >

Make Plot/Simulation Smaller

Previous pageReturn to chapter overviewNext page

This topic seems to be prepared for advanced ForeUI users, as your plot/simulation would not go big until you use ForeUI for a while. However the best practice is to learn those tricks to keep your plot/simulation small and neat at the beginning, otherwise you will feel very frustrated to spend a lot of time on optimizing your big plot in the future. Please keep in mind that, 90% of the "big plot" issue could be avoided/fixed by refactoring your plot, so the better you know these tricks, the less chance you will face the issue.

So how big is big? When your plot takes more than 10 seconds to save, or the simulation takes minutes to load in web browser, you know your plot/simulation is big. You'd better not to add more content into the plot before optimizing its size. Otherwise, your efficiency will go down quickly as the saving a plot can take a minute, or loading a simulation can take a hour. You will find it worth every minute you spend on optimizing your plot size.

Ok then, here are some tricks to make your plot smaller:

Use Master Page to Avoid Duplicated Content

Usually there will be some common parts between pages in your plot.  Many people choose to duplicate elements or even the entire page to make sure every page have those common parts. However that's a very bad idea since it generates a lot of unnecessary duplication of content (thus make your plot big), and you will have to synchronize those duplicated content if you want to change a part of it.

You are encouraged to move those common parts to a master page, which can be shared by other pages. This trick is frequently used for pages that have the same header, footer or side bar.  For example, all pages in your plot has the same header, footer and sidebar.  So you can place them in a page, and all other pages use this page as the master page.  Thus you can just manage the center content, and no need to worry about the header, footer and sidebar for every page. In case you want to change the style of header, footer or sidebar, you just do so in the master page, and all page will have the updated content. If you don't know how to set master page, here is the how-to.


Continue on the example above, what if some pages have different side bars, while they have the same header and footer? Please notice that master page is not a special kind of page, it is just a normal page that get referenced by other pages. So a master page can have its own master page as well. You can consider using this structure:


In the example above, three pages are used as master pages.  Master Page 1 is shared by Master Page 2 and 3, while Master Page 2 is shared by two pages (Page 4 and 5) and Master Page 3 is shared by another two pages (Page 6 and Page 7).  This hierarchy should meet the requirements for most web site/application prototyping.

By using master pages, you can avoid duplicating content in the plot, and significantly reduce your plot size.

Use Reference Element to Avoid Duplicated Elements

Besides using master page, there is another way to reuse existing content: the Reference element. The Reference element is listed in the Elements Panel, and has the icon like this:


After adding the Reference element into the plot, you will need to specify its target element.


By specifying the target element, the Reference element will then copy the look and behavior of the target element. Different than master page, a Reference element can be placed anywhere in your plot, so it is very suitable for reusing content in different locations.

You can choose only one element as the reference target. In case you want to reference more elements a time, you could group them before setting as the target.

Using Reference element can also reduce the duplicated content in your plot, thus make your plot smaller.

Optimize Image Usage

We noticed that many plots is big because they use a lot of (big) images. So if you wish to keep your plot small, please make sure your plot only includes the images that are necessary.  Nobody would like to include unnecessary images in the plot,  but sometimes you may do this unconsciously. Consider this case:  you add an Image Box element and specify an external image file for it, after a while you delete that Image Box and forget it.  But the image is still stay in the Images Panel, and will be saved to plot file even it is not used anymore.  If you did this a lot, your plot will become big, because it contains many unused images in Images Panel.

What's more, sometimes you may include duplicated images in your plot, which is imported from the same image file in your hard drive. The better way is to remove the duplicated images and redirect all the links to the only remaining copy.

Since ForeUI V3.0, you have a tool in the Images Panel to optimize the image usage. Just click the button and it will detect all the duplicated and unused image, and fix them for you. It is easy and cost nothing, so it please remember to give it a try if you feel your plot is becoming big.


Convert Static Elements into ClipArt

Since ForeUI V3.8, you can convert selected elements into ClipArt. Many elements in your simulation are actually static, if you convert them into a single picture, your simulation will be much smaller and the DOM structure will be significantly simplified, and the loading time will be reduced a lot.

The most suitable scenario to use ClipArt is to create charts with those basic shape elements, which are all static. Instead of letting ForeUI to generate the DOM objects for each static element, generating a big static picture to hold all of them is much better.

Here are two simulations for the same content, the only difference is that, one of them converts elements into ClipArt, while the other one doesn't.

Simulation without ClipArt Conversion

Simulation with ClipArt Conversion (much smaller and faster)