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 .
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
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.