Spritesheet vs individual images

Hi is there any difference in performance if I use one sprite sheet for example with 1000 items in one image, or load 1000 images individually. Im talking about the desktop game done in phaser, not for the online web.


ps I’m asking this because i was examine the files of the game called terraria, big and famous game and i found nearly 15k!!! individually images of all items and everything from the game. I just dont know is that normal.

1 Like

I would expect a difference in performance. And the loading would be slower too.

I think that the only difference is that it will load faster if yo do it with spritesheets

There’s a number of critical differences:

1: Every file that needs fetched has some overhead as it loads - there’s the request ‘out’ to retrieve the file, and then data ‘in’. Multiply this overhead by 1000s and it starts to become noticeable. For a sprite sheet there’s only the one request (unless you are using a clever multi-sheet system, but even then the network calls are much reduced).

2: Once the images are available in the browser, in order to be rendered they need to be made available to the GPU, i.e ‘uploaded’. Again there’s overhead here. For separate images, that’s a lot more overhead!

  1. You can’t optimise 1000’s of images as well as one big sheet - e.g pngquant will reduce the colour palette associated with a png to only the necessary colours. If 100 files share the same colour, that (admittedly tiny) data is duplicated. On a single sheet, that colour only needs pallletised once). Sheets can also rotate and trim in order to make the sum of 1000 images overall ‘smaller’ in dimension, which reduces GPU overhead.

Is there a time when separate images are better? Yes indeed! You may have a situation in which you have limited GPU memory to play with, so it makes sense to carve up the sprite atlas into smaller parts, or even just absorb the overhead of separate files, in order to allow loading of only the few assets you need, as you need them (with the option of purging them out of the GPU when they are done with, so that more can come in!)


What about altas vs multiatlas?

Multiatlas allows overflow of ‘grouped’ assets (eg all your environment art) that are too big to fit on one sheet. On mobile devices it’s typical to limit individual textures to ‘2k’ (2048px wide and high) at maximum - a few years back some browsers would outright fail to load anything bigger. In these circumstances you’d use a multi atlas so that you could load ‘one’ resource that (behind the scenes) was structured in a way better suited to browser/GPU requirements.

There’s a tiny bit more overhead for multi atlas as it does incur additional network call for each image (each is a separate request).