Are spritesheets worth it? Is a zip a good alternative?

Question

I was wondering if spritesheets are worth it. I am making a game with pixi.js and was thinking about optimization, beginning with asset loading. I currently have an arraya of all files and use PIXI.loader, but I know this is not good because it will make a web request for all files which takes long, so I should figure out a way to load them in one web request. The first thing I thought of was a spritesheet but then I thought "what if I just zipped everything and loaded it with something like JSZip?" I knew it was possible already (from this project that loads pixi textures from a zip) and listed what I think are potentials good and bad things:

Zip good points:

• Compression meaning faster loading of assets
• Compression meaning smaller build size when making a build with electron

Zip bad points:

• Requires loading a separate library meaning increased loading time and using more RAM
• Requires decompressing in-memory meaning increased loading time

Spritesheet good points:

• Doesn't has the headers of all individual image files
• Is much used so it is a proven technique

Spritesheet bad points:

• No compression (or at least not comparable to zipping)
• More than one network call due to phone limitations preventing sometimes files over 2024x2024px making it necessary to split spritesheets
• Empty holes as all images are not the same size and there is almost always a bit of space left in the spritesheet, meaning useless pixels that are still transfered over the network

I am not a very experienced developper, so I have a few questions:

1. Did I miss a point above?
2. Are spritesheets generally worth it?
3. Which technique of both is more worth it? I could do both but I want to focus on one first and leave the other in a nice to have list.

Answer 1

First of all, there are already image formats with compression. In particular the PNG format supports lossless compression. Furthermore, while it is true that taking a bunch of PNGs and zipping them might be a gain in size, making a texture atlas (spritesheet or similar) will also reduce the size in similar fashion, in particular if you rank up the PNG compression level when exporting the image.

Thus, a properly exported texture atlas will give you the benefits you list on compression.

Does this mean that you should make everything into a single spritesheet? No. You should put together things that should be loaded together.

It might also be worth noting that spritesheets work better when your images are small and of regular sizes. It might be you are working in a scenario for which spritesheets are not well suited.

Is that the case? I don't know. Do experiment. If you are not willing to try both techniques to decide, the engineering approach suggest to go with the proven method, and that would be a texture atlas.

You might also be interested in packing algorithms that may minimize the holes in the texture atlas.