Help get this topic noticed by sharing it on Twitter, Facebook, or email.
Dan (Official Rep) October 05, 2011 13:55

Memory management

Page imagery
Pages within the interactive book are usually made up of extensive imagery. Imagery is used in the backgrounds, in the animations and in the image objects. More images and larger images will mean more memory being consumed when the page is displayed in preview mode (e.g. when running).

Page size

Overall, we typically like to aim for a budget of 20MB of imagery per page, assuming that there is medium to light use of common pages like the index page and master page.

Understanding Memory footprint and imagery/textures.
The iPad cannot directly render compressed images such as png and jpg without decompressing them.
So making a file smaller by making it a png file or jpg file will reduce the size of the final dcb file and hence in turn the final 'on disc' size of the application that people will download. This is good to manage the disk size of an interactive book.
However, it has ZERO bearing on the RAM usage of the image.
The real impact on memory is the dimensions of the images used in Composer. Larger dimensions account for more memory usage regardless of the type of file used.

Examples of common image sizes and their associated impact on memory.
32x32 = 4KB
128x128 = 64KB
256x128 = 128KB
256x256 = 256KB
512x256 = 512KB
512x512 = 1MB
1024x512 = 2MB
1024x1024 = 4MB
2048x1024 = 8MB
2048x2048 = 16MB*
*2048x2048 is the largest texture the iPad can hold.

The iPad stores textures/imagery using the Power of Two (1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024 and 2048). All the common sizes displayed above are Power of Two sizes.

This is an essential point! Any image that exceeds a Power of Two(POW2) size will use the next largest size when displayed on screen. If you have an image that is 278x523, it will be held internally as a 512x1024 sized image.

This is a due to the way the iPad stores and displays images/textures and is not in our control.
(Technical calculation: To get the RAM used by an image its POW2(X) x POW2(Y) x 4. So in the above example its 512x1024x4 = 2097152bytes. Divide by 1024 to get KB = 2048KB, then divide by 1024 again to get MB = 2MB)

Tips for reducing memory footprint of your interactive book
Tip 0: Focus on a 20 MB page budget where possible

Tip 1: Look for any images that are over a Power of Two size that don’t need to be.

For example, if an image is 257x514, then it could possibly be trimmed back to 256x512. The extra 3 pixels (256 + 1 and 512 + 2) have increased the size of the image/texture by 1.5 MB.

Tip 2: Consider using the Background Image

The 'Background Image' that is avaliable to be filled with an image will always use up memory (4MB), regardless of whether it has been used, so make the most of it.

Tip 3: Flatten as many things into one texture as you can

If an object doesn’t move and nothing needs to move behind it then make it part of the background texture, if things overlap it you may be able to merge them into 1 texture. Using Layers in Photoshop is handy and convenient but comes with a large memory cost you cannot afford on the iPad.

Tip 4: Remember animations take up memory as well

An animation object/spinner object holds 2 frames in memory at once. So large animation images will still have an effect on memory. Thus, due to the larger load times on larger files( in dimensions not file size), there may be issues with doing large animations quickly.

Tip 5: Use the transforms effects to move things, not animation.

You should not do movement within the animation frames but use transforms to move something that animates on the spot around where ever possible. Also rotations can be done by the transform system as can fades and scales. This takes up much much less memory.

Tip 6: Split your images up

Ok so all the images are down the smallest you can get them to,but you still have a large overhang of 280->512 what can you do?
Take the example above of 278x523. Now we know that this will expand in memory to 512x1024 = 2MB.
However, if we split it into 4 images, the situation changes.
Consider images A, B, C and D arranged like so
Image A = 256x512 = 512KB
Image B = 32x512 = 64KB
Image C = 256x16 = 16KB
Image D = 32x16 = 2KB
Total: 594KB. This saves 1454KB of memory for the exact same image!
6 people like
this idea