Optimizing Spritesheets in HTML with EaselJS

Question

I'm an iPhone dev and I've been using Spritesheets there for a while. In iOS, spritesheet image dimensions should be optimized into "Powers of two" (eg 1024x2048) because they allocate memory in those blocks, and other image resolutions would be less optimized.

My question -- is this logic applicable across all platforms? I'm now using spritesheets in HTML5 with EaselJS and I want to know whether it's better to use "Power of Two" size constraints, or just use any size.

Answer 1

Using powers of two does carry into the EaselJS/CreateJS world. In fact, the recommendation is baked right into the EaselJS source code for SpriteSheetBuilder - where both maxWidth and maxHeight have the comment:

It is recommended to use a power of 2 for this value (ex. 1024, 2048, 4096).

This is also advice given from Atari Arcade which used CreateJS. The Building HTML5 Games for the Atari Arcade dev guide has the suggestion:

Create spritesheets and textures that have dimensions that are a power of two.