Sprite compression

[Jammy]

Hiya,

I'm wondering about png and sprite compression in general, and how PIXI see's it.

Note: these questions are not about the network or other web impacts, I'm interested in the point where PIXI gets the data and loads it then renders it.

I'm wondering first, if a PNG is compressed e.g. down to 20% from its original size, would this have any bearing when it came to pixijs loading or rendering either, for example one being 100mb and the next being 20mb, but the dimensions and contents (from a visual perspective, not data) of the file remain the same.

Secondly, I'm wondering if there are compression techniques that I'm not aware of for sprites, not simple spritesheet tricks but any compression algorithms or package type things.

Any feedback/input much appreciated!

Thanks! Jam.

Edited August 3, 2020 by Jammy

[Exca]

There's plenty you can do with compression.

For png/jpg images the amount of original image doesnt change how much memory gpu takes for that image. As those images get unpacked. But you could use compressed textures to remove decompressing and lower gpu memory usage. https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Compressed_texture_formats

One thing I'm not really sure is that if you have 8 bit png does that become 8bit or 32bit image after decoding.

When it comes to loading related compression (targeting minimal dl time and no compressed textures needed) my basic workflow is to do the following:

- Use spritesheets to group similar colored assets together (without breaking batching).
- Group assets that dont need transparency together.
- Export all as nonpacked png.
- For images without transparency, update the json to use jpg and pack the png with Google Guetzli (https://github.com/google/guetzli)
- Pack the png images to 8 bit version and do a visual check if quality drops too much. I use PNGoo for this. (https://pngquant.org/)
- Run all png assets trough PNGauntlet ( https://pnggauntlet.com/) It's a tool that combines PNGOut, OptiPNG and DeflOpt and picks the smallest png.

And doing lots of profiling between steps to see what actually has a positive impact.

[Martin99]

I'm using this website for compress png and jpg files:

https://tinypng.com/

[ivan.popelyshev]

When its time to render stuff, texImage2D

1. uncompresses PNG to RGBA, 4 bytes per pixel

2. uploads the result to GPU

Sometime later when RGBA on js side is not needed, browser removes it. When - we dont know.

In certain moment ( look up PixiJS TextureGC sources), pixi can decide that texture was used too long ago and remove it from GPU mem.

For compressed texture formats the density is different - 1 or sometimes (rare) 0.5 byte per pixel. Its better to zip them server-side (static-gzip), and browser will unzip it.

 

Edited August 3, 2020 by ivan.popelyshev

[Jammy]

@ivan.popelyshev @Exca Thanks guys really appreciate the information. Looks like I've got some references here to start looking at, Thanks!

[opd]

Quote

Secondly, I'm wondering if there are compression techniques that I'm not aware of for sprites, not simple spritesheet tricks but any compression algorithms or package type things.

I use Cloudflare's webp conversion service.  It comes with the Pro package, so it's $20 a month. 

Depending on you needs, it can be really worthwhile.  For me, it's appealing as you just turn it on and then you don't think about it anymore.