I have created a cross platform game that has grown to use over 1000 png images.
I’m starting to think maybe there are better ways to download 1000 images than just to put them as-is in the “Assets” folder - which makes them load simultaneously. That made me wonder what are the best practices to multiple assets loading in html5.
Started doing some reading and here are a few options i had in mind:
- Stay as is. (load them from “assets” simultaneously)
- Zip them together to a single binary using GZip and download 1 file.
- Zip them to multiple files limited by size (lets say ~2Mb per file).
I’d really appreciate it if anyone has some tips on the subject.
There’s two things I can come up with right now:
- Put them in a sprite sheet
- Load them when you need them
Creating a sprite sheet is good practice anyway, since it will cut your file size, and it increases performance in your browser. Referring to a part of one image is quicker than referring to seperate images, even though all of them are cached.
You can use
Assets.loadBitmapData instead of