[Tutorial] PNG size optimization

Place to get help with not working mods / modding interface.
Post Reply
User avatar
snouz
Inserter
Inserter
Posts: 27
Joined: Sun Jan 03, 2021 6:01 pm
Contact:

[Tutorial] PNG size optimization

Post by snouz »

I want to share my findings and discuss PNG files optimization. There are 2 main ways:

LOSSLESS when you don't want to lose any quality (color, pixels...)
Example: vanilla, Krastorio2

There are many softwares that do that, but I couldn't find any better than:

-> PNGGAUNTLET <- (pc)
The end image is exactly the same, but even on previously optimized images, you can gain between 5-15% space
Image

To use it, just install and drag & drop any file or folder (it's recursive, you can drop your whole mod folder), select "overwrite original files" and click "Optimize!". It will display the space you've gained.

It combines PNGOUT, OptiPNG, and DeflOpt into one.

------------------------------------------------------------

WITH LOSS when you're ready to trade a bit of visual quality for loading time
Example: Space Exploration

If you want to compress much more (because you think color limitations are not really visible ingame), I use an online compressor
(if someone has an equally efficient, unlimited and preferably portable alternative, I'm all for it)
https://www.websiteplanet.com/webtools/imagecompressor/
  • CONS :
  • You have 3 settings, but even with "low" compression, it limits colors to 256, so you get this kind of loss:

    Image
    before | after
  • you can only process 40 images at a time (you get a zip in the end)
  • filenames get a "_optimized" prefix, that you can mass remove with Bulk Rename Utility

    PROS :
  • But on the other hand, you can gain a LOT of space. In this example, I gained 87%, turning a 2900 KB file into a 370 KB one !
    Advantages of space gain:
    -Game loading time
    -Disk usage
    -Download/update time
Important note: After using that tool, you can STILL pass your mod in PNGGauntlet as you'll still gain a few percent for no more quality loss !

-----------------------------------------------------

My opinion:
Lossy compression is pretty safe to use for:
  • icons, technologies (these are downsized ingame anyway),
  • shadows (it's should be a sharp black shape, and you really don't care with the ground noise),
  • lights, masks (these are blended on top of normal textures)
Using it on entities is your choice (Space exploration probably did this choice to avoid a 1GB mod, but Krastorio2 didn't because they don't want to compromise the artistic vision)

Whatever you chose, you can safely drop your mod in PNGGauntlet for free real estate.

What do you think? What do you use? Do you know better tools?
Graphically contributed to : Bio Industries (soon) | Warehousing | MFerrari's mods | Brevven's mods | Bob Artisanal Reskins | Mining Drones | Teleporters | Emoji signals

User avatar
eradicator
Smart Inserter
Smart Inserter
Posts: 5206
Joined: Tue Jul 12, 2016 9:03 am
Contact:

Re: [Tutorial] PNG size optimization

Post by eradicator »

snouz wrote: ↑
Thu Feb 25, 2021 10:26 pm
I use an online compressor
it limits colors to 256
Urg. Non-automatable dubious "service" that does god-who-knows to your pictures. I hope you didn't catch any virusses.

JFYI: *Every* online file-conversion "service" uses open-source command line programs in the background. They never do anything you can't do on your own pc. And I'd be very suprised if they didn't at least try to sell your data/images. My recommendation: Don't go anywhere near those.
snouz wrote: ↑
Thu Feb 25, 2021 10:26 pm
if someone has an equally efficient, unlimited and preferably portable alternative
Google for "image quantization", "pngquant", etcpp.

Also you should mention that lossy pngs only reduce the download/filesize but not the VRAM requirement. Personally i recommend against lossy unless the file size really is a big problem.
snouz wrote: ↑
Thu Feb 25, 2021 10:26 pm
Do you know better tools?
There are dozens of png optimizers out there. And a bunch of meta-tools that try a bunch of them and then use the best result. Talked about that a few threads ago.
Author of: Belt Planner, Hand Crank Generator, Screenshot Maker, /sudo and more.
Mod support languages: ζ—₯本θͺž, Deutsch, English
My code in the post above is dedicated to the public domain under CC0.

PFQNiet
Filter Inserter
Filter Inserter
Posts: 289
Joined: Sat Sep 05, 2020 7:48 pm
Contact:

Re: [Tutorial] PNG size optimization

Post by PFQNiet »

eradicator wrote: ↑
Fri Feb 26, 2021 1:13 am
snouz wrote: ↑
Thu Feb 25, 2021 10:26 pm
I use an online compressor
it limits colors to 256
Urg. Non-automatable dubious "service" that does god-who-knows to your pictures. I hope you didn't catch any virusses.
It just... all it does is change the PNG image mode from RGB to Indexed.

And that's all you need to do too. Here's my "tutorial":

Make your graphics. Open it in GIMP. Image > Mode > Indexed... tweak some settings and boom, done. Save, and your sprite file size is really teeny tiny. But, as mentioned, Indexed images are limited to 256 colours (because they use a palette) so you do lose some quality. If that's important to you, don't do this.

But yeah, there's tools that can make that process easier, I guess.

User avatar
Deadlock989
Smart Inserter
Smart Inserter
Posts: 2528
Joined: Fri Nov 06, 2015 7:41 pm

Re: [Tutorial] PNG size optimization

Post by Deadlock989 »

My opinion: using lossy compression to shave a handful of seconds off loading/downloading time is like cutting off your toes so you can put on a pair of cheap shoes. If I'm going to settle down for a 2 hour gaming session, I couldn't give a monkey's if the game took 30 seconds to load instead of 35. Even if the difference is greater, looking like pants on toast is not a price I'm willing to pay.

I use PNG Gauntlet for non-lossy compression. As eradicator has said, it's just an implementation of several well-established methods and it trials them all to see which one comes out smallest.
snouz wrote: ↑
Thu Feb 25, 2021 10:26 pm
Lossy compression is pretty safe to use for:
  • icons, technologies (these are downsized ingame anyway),
Not true. If you are on 200% GUI scale, e.g. you have a 4K monitor, then the icons are shown at their maximum resolution. It's also never true if your icons are mipmapped - the game shows the mipmap level that matches your GUI scale, regardless of whether the quality of that mipmap level has been wrecked by lossy compression. Also, icons are small and you need them to be clear and unambiguous: of all the sprites a mod might provide, they are literally the worst candidates for lossy compression.
[*]shadows (it's should be a sharp black shape, and you really don't care with the ground noise),
True, because sprites for the shadow layer are all stored in the atlas in a single colour channel anyway, so they may as well be 256 shades of grey in the original image. You do want some feathering at the edges though; there's sharp, and then there's too sharp. PNG Gauntlet will drop to 8 bit if it detects that there aren't more than 256 shades in the original image anyway (I assume this is a feature of pngopt).
[*]lights, masks (these are blended on top of normal textures) [/list]
Not necessarily true. Most lights and masks are monochrome (see shadows) but they don't have to be. For non-primary shades in particular, dropping to 8 bits would be a massive loss of quality.
Whatever you chose, you can safely drop your mod in PNGGauntlet for free real estate.
I don't know exactly what you mean by "real estate" here but if you are suggesting that compressing images saves atlas space/VRAM, that's not correct. They are all unpacked into the atlas regardless of how much the originals were compressed or not.
Image

User avatar
snouz
Inserter
Inserter
Posts: 27
Joined: Sun Jan 03, 2021 6:01 pm
Contact:

Re: [Tutorial] PNG size optimization

Post by snouz »

I'm reading your answers and will adapt the guide in consequence, thanks for the feedback!
Graphically contributed to : Bio Industries (soon) | Warehousing | MFerrari's mods | Brevven's mods | Bob Artisanal Reskins | Mining Drones | Teleporters | Emoji signals

User avatar
darkfrei
Smart Inserter
Smart Inserter
Posts: 2903
Joined: Thu Nov 20, 2014 11:11 pm
Contact:

Re: [Tutorial] PNG size optimization

Post by darkfrei »

Nice tutorial!

I am using this pingo script: viewtopic.php?p=250171#p250171

I find it so helpful, that I have it in the my signature here about few years.
I am using the "good" version, but for low quality graphics (can be used) the "best" version, you lost nice gradients, but get really light graphics for potato-computers.

User avatar
eradicator
Smart Inserter
Smart Inserter
Posts: 5206
Joined: Tue Jul 12, 2016 9:03 am
Contact:

Re: [Tutorial] PNG size optimization

Post by eradicator »

Deadlock989 wrote: ↑
Fri Feb 26, 2021 10:29 am
using lossy compression to shave a handful of seconds off loading/downloading time
Yes, download time doesn't matter. Startup time probably depends more on image resolution than file size so i doubt it makes any difference at all. But from the perspective of someone with really shitty internet: Lossy reduction by say 70%[*1] of a large mod could shave hours off the upload time. Also i heared rumors that the mod portal might have some kind of maximum file size limit?

[*1] Number takend from pngquant visually transparent lossy compression example.
Deadlock989 wrote: ↑
Fri Feb 26, 2021 10:29 am
Also, icons are small and you need them to be clear and unambiguous: of all the sprites a mod might provide, they are literally the worst candidates for lossy compression.
Fully agree. Icons should never be lossy.
Deadlock989 wrote: ↑
Fri Feb 26, 2021 10:29 am
PNG Gauntlet will drop to 8 bit if it detects that there aren't more than 256 shades in the original image anyway (I assume this is a feature of pngopt).
Don't know pnggauntlet but i can confirm that pngout will reduce bit depth to the lowest possible lossless depth (1bit for true black/white as far as i remember). Depending on render settings the shadows might have many more shades-of-grey though even if they're not visible to the humane eye. In that case reducing the color count with a normal image editor and then applying lossless compression should also give a much smaller file.
darkfrei wrote: ↑
Fri Feb 26, 2021 3:49 pm
really light graphics for potato-computers.
Wrong. Repeating for the third time in this thread because it's so important: PNG filesize has no effect whatsoever on FPS or VRAM usage. FPS/VRAM is soley dependant on image resolution.
Author of: Belt Planner, Hand Crank Generator, Screenshot Maker, /sudo and more.
Mod support languages: ζ—₯本θͺž, Deutsch, English
My code in the post above is dedicated to the public domain under CC0.

User avatar
kirazy
Filter Inserter
Filter Inserter
Posts: 416
Joined: Tue Mar 06, 2018 12:18 am
Contact:

Re: [Tutorial] PNG size optimization

Post by kirazy »

eradicator wrote: ↑
Fri Feb 26, 2021 8:24 pm
Also i heared rumors that the mod portal might have some kind of maximum file size limit?
This is the primary reason I lossy compress, and I'm pretty sure the limit is ~200 MB. I blow through that if I don't compress and I'm not inclined to break out the graphics into separate resource packs.

Edit: Or, actually, I just come very close. I always run the optimization for all three mods at once, and combined they're well over 200 MB, but alone they're not. Hm.

To be honest this thread is persuading me not to compress at all...

Edit 2: And lossless compression shaves 44% off their uncompressed state. Lossless it is...
Last edited by kirazy on Fri Feb 26, 2021 10:08 pm, edited 2 times in total.

User avatar
darkfrei
Smart Inserter
Smart Inserter
Posts: 2903
Joined: Thu Nov 20, 2014 11:11 pm
Contact:

Re: [Tutorial] PNG size optimization

Post by darkfrei »

eradicator wrote: ↑
Fri Feb 26, 2021 8:24 pm
darkfrei wrote: ↑
Fri Feb 26, 2021 3:49 pm
really light graphics for potato-computers.
Wrong. Repeating for the third time in this thread because it's so important: PNG filesize has no effect whatsoever on FPS or VRAM usage. FPS/VRAM is soley dependant on image resolution.
What if you have only last 500 MB free space on your computer?

User avatar
kirazy
Filter Inserter
Filter Inserter
Posts: 416
Joined: Tue Mar 06, 2018 12:18 am
Contact:

Re: [Tutorial] PNG size optimization

Post by kirazy »

darkfrei wrote: ↑
Fri Feb 26, 2021 9:59 pm
What if you have only last 500 MB free space on your computer?
In that case it may be incumbent on the player to be mindful of what they download, and perhaps optimize files themselves, rather than ask for every single possible user of a mod to sacrifice image quality on the altar of your lack of space.

User avatar
eradicator
Smart Inserter
Smart Inserter
Posts: 5206
Joined: Tue Jul 12, 2016 9:03 am
Contact:

Re: [Tutorial] PNG size optimization

Post by eradicator »

kirazy wrote: ↑
Fri Feb 26, 2021 9:59 pm
Edit 2: And lossless compression shaves 44% off their uncompressed state. Lossless it is...
If you get that much from lossless compression I suspect that whatever program made those files is a) broken or b) is set to a very low compression level or too high bit depth on purpose. Though the option can be well hidden in some programs and they're never as good as a proper optimizer anyway, so this might be unimportant.
darkfrei wrote: ↑
Fri Feb 26, 2021 9:59 pm
What if you have only last 500 MB free space on your computer?
Bravo, you constructed an obscure edge-case. In that case the user has other problems and should intesively consider cleaning up or buying a bigger drive. And as @kirazy said that is a user problem, not a modder problem.
Author of: Belt Planner, Hand Crank Generator, Screenshot Maker, /sudo and more.
Mod support languages: ζ—₯本θͺž, Deutsch, English
My code in the post above is dedicated to the public domain under CC0.

User avatar
kirazy
Filter Inserter
Filter Inserter
Posts: 416
Joined: Tue Mar 06, 2018 12:18 am
Contact:

Re: [Tutorial] PNG size optimization

Post by kirazy »

eradicator wrote: ↑
Sat Feb 27, 2021 6:09 am
If you get that much from lossless compression I suspect that whatever program made those files is a) broken or b) is set to a very low compression level or too high bit depth on purpose. Though the option can be well hidden in some programs and they're never as good as a proper optimizer anyway, so this might be unimportant.
Photoshop exporting as png-24. Not a huge deal.

Edit: It probably performs as well as it does because the vast majority of the images are mostly transparent and grayscale, but saved from full color source files without changing the mode first... and where changing the mode would be problematic. Testing on the average colored image, it was only 7% savings, whereas the mask/highlight images had 69% savings.

User avatar
eradicator
Smart Inserter
Smart Inserter
Posts: 5206
Joined: Tue Jul 12, 2016 9:03 am
Contact:

Re: [Tutorial] PNG size optimization

Post by eradicator »

kirazy wrote: ↑
Sat Feb 27, 2021 8:21 am
Not a huge deal.
whereas the mask/highlight images had 69% savings.
Yea, it was less of a comment to you then a comment to potential readers / the tutorial author: "If you're getting that much it might be worth checking your settings!". Cos usually that high gains indicate that compression isn't set to maximum - which might be intended if you need faster saving during normal work.
Author of: Belt Planner, Hand Crank Generator, Screenshot Maker, /sudo and more.
Mod support languages: ζ—₯本θͺž, Deutsch, English
My code in the post above is dedicated to the public domain under CC0.

User avatar
Deadlock989
Smart Inserter
Smart Inserter
Posts: 2528
Joined: Fri Nov 06, 2015 7:41 pm

Re: [Tutorial] PNG size optimization

Post by Deadlock989 »

eradicator wrote: ↑
Fri Feb 26, 2021 8:24 pm
Yes, download time doesn't matter. Startup time probably depends more on image resolution than file size so i doubt it makes any difference at all. But from the perspective of someone with really shitty internet: Lossy reduction by say 70%[*1] of a large mod could shave hours off the upload time. Also i heared rumors that the mod portal might have some kind of maximum file size limit?
I have to upload IR2 (~140 Mb of sprites all with lossless pngopt compression) on my phone contract because 4G's upload rate is better than the UK's crappy copper cable ADSL upload. It takes less than a minute on 4G. On ADSL the mod portal times out before it's a quarter done. If I didn't have a generous phone contract then the mod just wouldn't get uploaded rather than murder the sprite quality. I didn't spend 1500 hours on grappling with Blender just to wreck the end result.
eradicator wrote: ↑
Fri Feb 26, 2021 8:24 pm
Deadlock989 wrote: ↑
Fri Feb 26, 2021 10:29 am
PNG Gauntlet will drop to 8 bit if it detects that there aren't more than 256 shades in the original image anyway (I assume this is a feature of pngopt).
Don't know pnggauntlet but i can confirm that pngout will reduce bit depth to the lowest possible lossless depth (1bit for true black/white as far as i remember). Depending on render settings the shadows might have many more shades-of-grey though even if they're not visible to the humane eye. In that case reducing the color count with a normal image editor and then applying lossless compression should also give a much smaller file.
There are only 256 shades of (true) grey in the RGB colour space - 0x000000, 0x010101, 0x020202, ... OxFFFFFF. They are all visible to the typical eye. In my opinion the only reason to use 8 bit indexed colour is if there really are 256 or fewer colour values in the image, and in Factorio shadow sprites are the only general class of sprite that you can guarantee that will be the case.
Image

nastyslave
Inserter
Inserter
Posts: 40
Joined: Sat Aug 06, 2016 11:48 am
Contact:

Re: [Tutorial] PNG size optimization

Post by nastyslave »

I'm using https://css-ig.net/pinga
There was pretty nice articles about png-optimizers, but now I cant find them there...

Post Reply

Return to β€œModding help”