Optimising Textures

Textures often take most of the build size due to specifics of the data they hold: big arrays of pixels. Luckly enough, Luna targets HTML5 platform, which provides a handful of formats available with no additional effort.

Let's start by navigating to "Textures" tab under "Assets" section of Luna UI:


The highilghted part of the screenshot above is the section that describes parameters applied to exported textures by default. Let's break it down section by section.

Max size

This control allows to set maximum allowed size of a texture. If a texture exceeds the size in any dimension, it will be scaled down proportionally and its dimensions will be updated in metadata as well. That means that sprites, UV mappings and other elements working with a texture will remain valid, but will simply get less texels. It's a developers' responsibility to not store pixel values for manipulating the textures (which is bad practice anyway) - the only bit that resizing can break is when someone attempts to read hard-coded region of an image (hard-coded in pixels, of course).

Querying the width and height properties of the texture object will return updated values as well.


This controls the format of the texture. By default, Luna uses PNG32 format, which is a lossless compression format supporting RGB and Alpha channels.

What about HDR?
Luna re-encodes HDR textures, including HDR cubemaps, using RGBM encoding scheme. This is done to safely target all WebGL 1.0 installations avoiding the reliance upon availability of float-based texture formats usually used for storing HDR data.

To determine the most suitable format, one could follow the below set of rules:

  • High-fidelity elements with alpha channel, like crisp UI elements, are best to keep in PNG32 or PNG8 formats, depending on the amount of colors used
  • High-fidelity textures without alpha channel, like Normal Maps, are best to keep in PNG24 format
  • Opaque textures, less sensitive to compression artifacts, are good candidates for JPEG format

Generally, JPEG format provides best compression ratios for many situations and is preferred if alpha channel is not required. This format, however, can introduce compression artifacts, which can be minimized by raising compression quality. However, some images are best compressed with PNG, especially the ones that have big continiuous blocks of constant color.

Apply pngcrush

pngcrush is a well-known tool for optimising PNG images. There are instances where it can provide significant size reduction without affecting visual quality by brute-forcing compression algorithms available for PNG format and also removing optional metadata like graphics editor's tags. It is quite slow, though: processing a single PNG file can take several seconds, thus it is disabled by default.

Enabling this checkbox will apply a pngcrush run on PNG textures.

Custom script & Custom script extension

There are instances when a developer can find their own combination of settings for pngcrush or even resort to a custom tool, like pngquat (which we highly recommend to consider for PNG files with limited colors). To provide an ability to use arbitrary custom tools, developers can specify custom script that is going to be executed by Luna against a texture. It accepts the following placeholders:

  • {input} is replaced with full path to original PNG file (Luna always exports textures as PNG files in the first place)
  • {output} is replaced with the full path to the destination
  • {temp} is replaced with a temporary path the script might use as a scratch pad

In order for Luna to properly compute the output path, developers should also supply the extension of the output file their custom script will write.

Resizing textures with custom scripts
Luna will read the output texture file to identify its pixel size and update the metadata appropriately. It means that developers can do arbitrary resizing of the texture without having to worry how to account for that in the code that uses the texture. Users of this option, however, should be careful regarding preserving aspect ratio as Luna will not enforce it to stay the same.

Per-texture settings

All of the above settings are also available on a per-folder and per-texture level. Developers can choose a folder of a file by ticking a checkbox in "Per-texture settings" section of the window and use the same fields to tweak parameters of a specific texture(s):