Image Compression and Scaling

Generator will also let you specify a particular variation of an image format, such as the three available variations of the PNG format: PNG-8, PNG-24, and PNG-32. When a layer or group is named with a “.png” extension, Generator will create a PNG-32 by default, but you can specify a different PNG variation by including the variation number in the layer or group name:

These image format variations can be useful in managing the size of the assets you generate.

• blue_btn.png will generate a PNG-32 (largest, no variation number needed since 32 is the default)
• blue1_btn.png8 will generate a PNG-8 (smallest)
• blue2_btn.png24 will generate a PNG-24 (in between)

In most cases, we suggest that you use PNG-8, as this will produce the smallest file size. The exception to this is any image with a subtle drop-shadow or gradient, because PNG-8 could lead to banding. In these rare cases, we suggest that you use PNG-24 or PNG-32.

Image compression is a very important part of the creation process, because uncompressed images will lead to very large applets. Large applets are not ideal because they take longer to download or update, and they can sometimes (when very large) overwhelm the capacity of the device.

As seen in the previous section, PNG size can be managed by selecting a PNG format variation (PNG-24, PNG-8, etc). For JPEGs, file size can be managed by specifying a quality percentage after the extension in the layer or group name. By default, Generator will create JPEG-format assets at 90% of the original image asset quality, but you can choose a different level of compression by including image quality percentage immediately after image format extension (eg. .jpg50%, jpg70%):

This will produce an asset at your chosen image quality, which can reduce the file size of individual assets.

Below illustration shows the file size difference between jpegs with 90% and 50% quality.  We recommend applying 50% quality setting to all jpegs in your project.

Adobe Generator allows for three (3) methods of scaling image assets using:

1. Prefix as a percentage % - Percentage based scaling
2. Prefix which includes 2 units of measurement (eg. in, cm, mm, px) connected with the x character - Absolute size scaling  
3. Prefix which includes a wild card (?) and a unit of measurement for a single dimension, connected with the x character - Absolute size scaling with image proportions maintained

1. Scaling Image Assets using percentage % prefix

You can scale an asset by including a transformation percentage as a prefix to the layer or group name. For example, if you add 200% prefix to the blue_btn.png layer name, Generator will output and save the asset at 200% its physical dimensions.

The rule is, if there is no size prefix specified in the layer name, the contents of that layer will be saved at 100% their physical dimensions.  If the size prefix is specified, the image asset will be scaled to the predefined size.

Below example illustrates two layers.  The first one will generate an image with 100% its physical dimensions, and the second one will produce an image scaled to 200% its original size.

2. Scaling Image Assets using units of measurement prefix

Adobe Generator can also scale assets to an absolute size using units of measurement (eg. in, cm, mm, px) connected with the x character, as shown in the below example.