Techiniques for image compression for online game

General Discussion
1

Splitting your transparent layer for improved compression.
HTML5 game developers typically send around more image data than your standard website, most of it being transparent frames for a flipbook animation. Sadly that forces these files to use the PNG option in order to get transparency. However a few developers have devised a few work-arounds for images to get better compression and transparency. For example, you can split your color data, and transparency data into two separate image files (two JPGs, for example), and restoring them on the client using a CANVAS element. Although this does increase the number of requests that occur on the network, the savings in image size can be significant for developers who have tons of transparent images on their site .

need more technique like this.

1 Like
2

Hey, I read your topic very quickly but if you don’t create your pngs dynamically I can recommend https://tinypng.com/
It compresses your images dramatically.
Best regards, Domenic :slight_smile:

3

it compress 10kb to 4kb and i cannot see a difference.

but how they do it what is going behind the scenes.
how their compression algorithm look like

4

you can solve the problem by using “texture atlas”.

That’s 60%, I don’t know how you didn’t notice the difference.

5

Well, they won’t tell you because that’s how they make their money :wink:

6

I use TexturePacker, there are many apps like it but I like this one. It basically packs sprites close together in an attempt to remove empty space. It automatically packs in a way I would manually do it, so saves time.

7

I found this: https://stackoverflow.com/a/12146901, what gives you a link to: https://pngquant.org/, which leads to: GitHub - kornelski/pngquant: Lossy PNG compressor — pngquant command based on libimagequant library. You can investigate the alghorithm in there.

2 Likes
8

LOL :slight_smile:
Thanks for the link!

9

Please note that is only for saving download bandwidth and hard disk space. When loaded on memory, the images takes up exactly the same space.

1 Like
10

how about this if you are using the apha only as 0 and 1, you can choose a color that you won’t use (mostly pink) and set it as transparency data.