Jump to content

Sprite compression


Recommended Posts

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 by Jammy
Link to post
Share on other sites

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.

Link to post
Share on other sites

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 by ivan.popelyshev
Link to post
Share on other sites
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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...