The Zen of FSDL resource file limits

Frogans Player renders Frogans sites at a maximum resolution of 640×480 pixels (depending on the display capacity of your device). At the same time, FSDL imposes a limit of 256kb on the combined size the files used for any one Frogans slide (i.e., the files for the imported images plus the FSDL document itself).

[Note: The 256k limit is not carved in stone. Since Frogans Player is currently released as an alpha version only, this number value could be different for future releases.]

This means that designers and developers must constantly factor-in the sizes of their resources while authoring.

In FSDL graphic elements are stacked in layer, so it is tempting to compose a slide with several layers of overlapping images. But if imported images in these layers exceed 256kb, Frogans Player will return an error instead of rendering the slide.

So here are a few tips:

  1. Use PNGs sparingly

    PNGs are great to use on Frogans slides because you can use their transparency to determine the shape of your slide. On the other hand, PNGs can’t compress as extensively as JPGs can. Unlike JPGs, PNGs use lossless compression in that the compression will not diminish the quality of the image. But this quality comes at the price of larger files. So, if your image can be rectangular, without transparent areas, import it as a JPG, instead of a PNG.

  2. Reduce the number of colors in a PNG

    PNGs that have transparency masks use 24-bit color. This means that such an image can potentially contain millions of different colors. The number of different colors in a given image contributes to its file size. So, a 100×100 pixel PNG that has 10,000 different colors is going to have a larger file size than on that has only 50.

    A quick and easy way to reduce the number of colors used in any image is to apply a posterize effect to it, for instance using Photoshop or GIMP.The Posterize effect layer in Photoshop lets you preserve your original image in a layer while you find the right the balance between file size and image quality. A small amount of posterization is barely noticeable, but overuse can make your image look like an early 90s video game.

    The most effective way to reduce the number of colors in your image, without sacrificing too much image quality is to use a dedicated app, Photoshop plug-in or online service. Here are two options that I find useful:

    • pngquant is a free command-line utility and a library for lossy compression of PNG images. You can find applications and Photoshop plug-ins that use pngquant at https://pngquant.org/.
    • https://tinypng.com/ is a free online service for reducing your PNG file sizes by reducing the number of colors. It’s a simple drag and drop interface with a button for downloading the resulting image. There don’t appear to be any compression options, but I’ve found the results to be good. They also have a commercial Photoshop plug-in.
  3. Apply a mask to a JPG in FSDL

    The folks at the OP3FT have taken a look at the methods below and tell me that, while they help with file-size issues, they take a lot of  memory and processing power to render. All that adds up to a slower user experience. So, while it might be useful in some situations to use the methods below, I recommend using compressed PNG images using pngquant and tinypng.com.

    If you really need transparency an imported image, but you don’t have enough bytes to spare for a PNG, you can still save your image as a JPG and apply a transparency mask to it in FSDL. This can be done in one of two ways:

    1. If your mask is very simple, like an oval or a square, or if you’re not too picky about how it should align with the image, then you can create a vector shape in FSDL using the <resdraw> or <respath> elements. Stack your layer on top of the shape in FSDL and set the “combine” element to “clip.” Like this, the image will inherit the transparency of the shape below.

    2. You can also save a transparency mask as a separate file. In Photoshop you can make a selection based on the transparency of one or more layers. So, for instance, when you open a PNG in Photoshop, you can make a selection based on its transparency and save the selection as an alpha channel. Then you can paste the alpha channel as a layer in a new document. Save this new documunt as a grayscale JPG image where the transparent areas are black and the opaque areas are white

      Import both this image and a JPG of the original image FSDL and create a layer for each of them. Put your grayscale image below the original image and apply a lumatoalpha filter to the grayscale image. This will render the dark areas of the grayscale transparent.

      Stack the layer with the original image over  the grayscale image and set the “combine” attribute in the upper layer to “clip.” Like this, the image will inherit the transparency of the grayscale below.

      Even though two JPG images are used here in the place of one PNG, they will likely be quite a bit smaller than the single PNG.

Be the first to comment

Leave a Reply

Your email address will not be published.


*