Tutorial [AVIF UPDATE] How To Compress Images (For Dummies) v1.1

skyrfen

Ultimate Torrent Dude
Donor
Jun 13, 2021
4,196
2,430
HOW TO COMPRESS YOUR IMAGES (FOR DUMMIES) v1.1

This guide applies mostly to Ren'Py-based games, but feel free to apply it anywhere in your life.

You don't have permission to view the spoiler content. Log in or register now.

The Problem(s):
A lot of developers/artists/perverts simply export renders made in DAZ3D, HoneySelect or CharaStudio in the base PNG (aka Portable Network Graphics) format. Which is cool, except that it is not.

PNG was designed as an improvement to the GIF format (and yes, it's pronounced like "gift" but the T is silent; fuck you) - that's noble, but improving on something garbage isn't an achievement in my book.

Anyway, PNG preserves and stores a lot of information. PNG was also made in 1996. That's pretty much ancient history.
A standard exported 1920x1080 PNG flat image is around 4-5 MB per pic (that's megabytes, and also a fuck ton for a single static image).

"But, random internet person, you can crush the PNG to half that size!"
That just shows that you already made an extra step. A wrong one, might I add.

All games (except for Red Lucy) push hundreds if not thousands of images with every major update.
Let's take the best game Eternum and its (then) latest 0.6 update as an example: 1375 images x 4 MB = 5500 MB = 5.5 GB - this is close to the TOTAL size of the game after 0.6 (~ 6 GB).

There are two additional and important factors to consider: disk size and download speeds.
If Eternum was to never compress its images (a whopping 8311 of them), the game would be 33 GB (or about 10% of a typical Warzone update), which is A LOT of space. Taking a Steam-provided average download speed for the USA of ~ 100 Mbps (or 12.5 MB/s), you'd need close to 44 MINUTES to download the entire game of Eternum 0.6*.
*(at the minimum and assuming you have an uninterrupted and stable connection for the duration).

The (First) Solution - WEBP:
Reject the PNG, embrace the WEBP.

WEBP is the best thing that Google released since (technically it was BEFORE, but also technically years 2020-2023 were just a blur) the Nexus 5. It's really, REALLY good. It's basically JPG but not shit.

WEBP allows for crazy levels of compression before the "blocking" starts being noticeable, but even that can be mitigated with built-in filters.

What's the savings? Typically, compressing from a "source" PNG saves you 90-95%. Translated to Dummy that's between 1/10th and 1/20th of the original image (aka you can have 10 or 20 compressed images taking up the same space as one "raw"). A lot depends on the source image data, colours, and other boring shit.

The (Second) Solution - AVIF:
Ren'Py added support for AVIF images with the 8.1 release.

In short, AVIF (based on the based AV1 encoding) is like WebP but younger, sexier, and is probably in your girlfriend's DMs already. Using witchcraft and technology beyond my comprehension it allows for even smaller images than WebP (by ~15-20%) at the same perceived quality, or better quality images at the same size.

The downside? It handles colour conversion and compression differently than WebP, so you might experience a slight change in the overall presentation, but in my testing I wasn't able to clearly determine what feels off. YMMV.

How Do I Ascend?
Use any decent image converter, duh.

I can personally recommend XnConvert. Free, fast, and powerful.

1. Download it from .
2. Install or extract.
3. Add the files or folders you wish to compress (via the buttons or drag n' drop).
1703940075090.png
3a. If your source is in 4K and you want the 1080p, use the Actions tab and then Image > Resize. Use 'Lanczos' or 'Lanczos2' - yields the best results.
1703940093036.png
4. In the Output tab select where you want to keep the original setup ("Source Folder") or not, the output filename, and the format.
1703940104235.png
5. Select the numbers of cores you want to use (I prefer sticking to physical only, so half the max value).
6-1. Select the WEBP from the "Format" menu.
1703940118548.png
6-2. Select the AVIF from the "Format" menu. (yes, we got dark theme in this bitch now)
1731533037341.png
6-1a. Recommended settings (WEBP):
  • Quality:
    • For DAZ3D games (with lots of small details) I typically use 92-96, but keep in mind that darker scenes require higher value to retain the detail.
    • For HoneySelect games I typically use 90, but go as low as 87 - assets in HS-based games are usually simpler, hence the lower value.
    • For CharaStudio game I typically use 85, but you can go to 80 even - the shading style is very simple and forgiving.
  • Compression Method:
    • This one is pretty simple. 0 for the fastest conversion but biggest output file and 6 for the slowest conversion and smallest output file.
      Personally, it's worth setting it to 6 and letting it rip.
  • Filter Strength:
    • Sets the aggressiveness of the "deblocking filter". The higher the value the "smoother" the image will be, but you have experiment with this one. It comes into effect at lower quality value (anything below 85).
  • Filter Sharpness:
    • Pretty self-explanatory. The higher the value, the weaker the effect.
  • Sharp RGB > YUV Conversion is a MUST. This option preserves a ton of details, especially in the reds.
6-2a. Recommended settings (AVIF):
  • Quality:
    • In my experience, to match the WEBP in size, you can go 3-5 point in quality lower, e.g. WEBP 100 ~= AVIF 97-95. Then again, every instance is different, so play around with this setting on a variety of renders (bright/dark/simple/complex, etc.).
  • Subsampling:
    • There is no reason to pick anything other than 4:4:4. It retains the best colour accuracy with only a slight increase to the final size.
  • Speed:
    • Works similarly to 'Compression Method' found in WEBP; the lower the value, the slower the compression (and technically a smaller or better looking image, but I couldn't find much difference in my testing.
      'Speed 6' matches WEBP's 'Compression Method 6' in performance and produces great results, though I recommend experimenting.
7. That's it. You're a better human now. Congrats.

Comparison: (2.5 MB vs 212 KB)

Misc. notes:
- Don't do 100 quality or, Satan forbid, lossless. It's a waste of time and what the algorithm is capable of.
WEBP 100 is actually not bad and sometimes even necessary.
- A well-compressed WEBP 1080p image should not be larger than 600-650 KB. If you're close to 1 MB, tweak your settings.
- A well-compressed AVIF 1080p image should not be larger than 500 KB (in my testing at least).
- ALWAYS try to compress from the source material - this yields the best results since the algo has the most data to work with.
 
Last edited:

javajav

Member
Oct 31, 2019
116
338
If Eternum was to never compress its images (a whopping 8311 of them), the game would be 33 GB (or about 10% of a typical Warzone update), which is A LOT of space. Taking a Steam-provided average download speed for the USA of ~ 100 Mbps (or 12.5 MB/s), you'd need close to 44 HOURS to download the entire game of Eternum 0.6.
44 minutes, not hours. 12.5MiB/s is 1 GiB per 81.92 seconds.
(8311 images * 4 megs an image) / 12.5 megs per second / 60 seconds per minute = ~44.3253 minutes

But yeah. No reason to use PNG anymore aside from legacy compatibility. Even if you insisted on lossless, WEBP can do that with a much more favorable compression ratio. Or AVIF if you want to be fancy ( ). WEBP even solved the problem of lossily compressing images with alpha transparency -- the longstanding reason to use PNG instead of a lossy format.

Using your png as an example for lossless
input.png - 2563.83KiB
output.webp - 1602.70KiB (62.51%)
output.avif - 1382.33KiB (53.92%)
output.paq8px - 1257.29KiB (49.04%) [impractical/theoretical best]
 
  • Like
Reactions: skyrfen

skyrfen

Ultimate Torrent Dude
Donor
Jun 13, 2021
4,196
2,430
44 minutes, not hours. 12.5MiB/s is 1 GiB per 81.92 seconds.
(8311 images * 4 megs an image) / 12.5 megs per second / 60 seconds per minute = ~44.3253 minutes
Listen, I'm not natively smart, okay? Thanks for the correction!

But yeah. No reason to use PNG anymore aside from legacy compatibility. Even if you insisted on lossless, WEBP can do that with a much more favorable compression ratio. Or AVIF if you want to be fancy ( ). WEBP even solved the problem of lossily compressing images with alpha transparency -- the longstanding reason to use PNG instead of a lossy format.
Lossless is acceptable if you need to retain as much detail as possible (e.g. it's a map you can or have to zoom in to use), otherwise it'll be lost on a render that you see maybe for a dozen of seconds. My personal gripe is that most art out there does not deserve to be kept in "source" quality - the fidelity simply does not merit the space of occupies.
 

bazelgeuse

Member
Oct 21, 2019
377
236
This will only work for image compression right, I wont be able to compress a video for discord maybe.
 

skyrfen

Ultimate Torrent Dude
Donor
Jun 13, 2021
4,196
2,430
This will only work for image compression right, I wont be able to compress a video for discord maybe.
For videos you can use ffmpeg or GUI mods fot it like . is also a good option. All open-source and powerful.
 
  • Like
Reactions: bazelgeuse

Madeddy

Active Member
Dec 17, 2017
841
490
"Slightly" offtopic: So, just to educate some young and pityful lost souls:
(and yes, it's pronounced like "gift" but the T is silent; fuck you)
How dare you! :devilish: Infidel!


On the occasion of receiving a lifetime achievement award at the 2013 Webby Awards ceremony Steven Wilhite publicly rejected the hard-g pronunciation. (From WP cited) He put this slide up on stage:

Stephen_Webby_slide_at_the_2013_Webby_Awards.jpg

See also:

I find it really strange if someone invents something successful, name it whatever they like and some people who invented nothing, say they know better.

Greets
 

Boejakka

Newbie
Jul 22, 2017
15
19
Funny I do a lossy PNG of the example file of 1.246.642 bytes Sure it's not WebP size or AVIF but it's nowhere near the 2,5MB example you gave. There is much to gain by using good compression options also within PNG. Along are my webp lossless and lossy versions and yes webp lossless is just stupid for tons of reasons as the whole intention behind webp was good lossy compression.
Also by using other programs you can gain more compression. So was my lossless png compression 2.02 MB of the same file.
Sure XNView is good enough but specialized tools can get you more and sometimes faster as well.

Time for the images.
Lossless (max compression) was 2.02 MB in 1.64 seconds saving 492KB
compressed PNG (Max compression was 1.18 MB in 1.97 seconds saving 1.32 MB
WebP Lossless (Max compression) was 1.59MB in 2.97 seconds saving 929KB (36.23%)
WebP Lossy (Max compression) was 168KB in 0.36 seconds saving 2.34MB (93.43%)
 
Last edited:

skyrfen

Ultimate Torrent Dude
Donor
Jun 13, 2021
4,196
2,430
Funny I do a lossy PNG of the example file of 1.246.642 bytes Sure it's not WebP size or AVIF but it's nowhere near the 2,5MB example you gave. There is much to gain by using good compression options also within PNG. Along are my webp lossless and lossy versions and yes webp lossless is just stupid for tons of reasons as the whole intention behind webp was good lossy compression.
Also by using other programs you can gain more compression. So was my lossless png compression 2.19 MB of the same file.
Sure XNView is good enough but specialized tools can get you more and sometimes faster as well.
This example wasn't about that you can, but that people out there don't know or don't care. There are at least a couple of games that shipped with large .psd files or entire folders of old or unused renders. Developers need to be educated and that's why my post exists.
 

SnG

Newbie
Aug 8, 2017
68
34
Is there any tips for file size compression without changing the image's resolution?
In JPG or PNG if you can, webp doesn't have support from CSP yet (I've mostly used this for my drawing and painting) and webp changes the color tone of the images as well, it's kinda annoying when trying to see the "original" to learn some colors from artworks and notice this when trying to compress the images while back, maybe my compression setting and I didn't know that much about it. so yeah.
 

skyrfen

Ultimate Torrent Dude
Donor
Jun 13, 2021
4,196
2,430
Is there any tips for file size compression without changing the image's resolution?
In JPG or PNG if you can, webp doesn't have support from CSP yet (I've mostly used this for my drawing and painting) and webp changes the color tone of the images as well, it's kinda annoying when trying to see the "original" to learn some colors from artworks and notice this when trying to compress the images while back, maybe my compression setting and I didn't know that much about it. so yeah.
I'm not entirely sure what you require or trying to achieve? Please explain.

Firstly, does CSP stand for Clip Studio Paint application?

Secondly, the WEBP should always be used with RGB to YUV conversion to avoid colour tone change (not sure if CSP supports that, their website doesn't tell me much). You could always export to PNG and then convert to WEBP with a dedicated application (like the XnConvert I liked in the OP).
 

Bowachin

Member
Game Developer
May 18, 2018
103
343
HOW TO COMPRESS YOUR IMAGES (FOR DUMMIES)

This guide applies mostly to Ren'Py-based games, but feel free to apply it anywhere in your life.

The Problem(s):
A lot of developers/artists/perverts simply export renders made in DAZ3D, HoneySelect or CharaStudio in the base PNG (aka Portable Network Graphics) format. Which is cool, except that it is not.

PNG was designed as an improvement to the GIF format (and yes, it's pronounced like "gift" but the T is silent; fuck you) - that's noble, but improving on something garbage isn't an achievement in my book.

Anyway, PNG preserves and stores a lot of information. PNG was also made in 1996. That's pretty much ancient history.
A standard exported 1920x1080 PNG flat image is around 4-5 MB per pic (that's megabytes, and also a fuck ton for a single static image).

"But, random internet person, you can crush the PNG to half that size!"
That just shows that you already made an extra step. A wrong one, might I add.

All games (except for Red Lucy) push hundreds if not thousands of images with every major update.
Let's take the best game Eternum and its (then) latest 0.6 update as an example: 1375 images x 4 MB = 5500 MB = 5.5 GB - this is close to the TOTAL size of the game after 0.6 (~ 6 GB).

There are two additional and important factors to consider: disk size and download speeds.
If Eternum was to never compress its images (a whopping 8311 of them), the game would be 33 GB (or about 10% of a typical Warzone update), which is A LOT of space. Taking a Steam-provided average download speed for the USA of ~ 100 Mbps (or 12.5 MB/s), you'd need close to 44 MINUTES to download the entire game of Eternum 0.6*.
*(at the minimum and assuming you have an uninterrupted and stable connection for the duration).

The Solution:
Reject the PNG, embrace the WEBP.

WEBP is the best thing that Google released since (technically it was BEFORE, but also technically years 2020-2023 were just a blur) the Nexus 5. It's really, REALLY good. It's basically JPG but not shit.

WEBP allows for crazy levels of compression before the "blocking" starts being noticeable, but even that can be mitigated with built-in filters.

What's the savings? Typically, compressing from a "source" PNG saves you 90-95%. Translated to Dummy that's between 1/10th and 1/20th of the original image (aka you can have 10 or 20 compressed images taking up the same space as one "raw"). A lot depends on the source image data, colours, and other boring shit.

How Do I Ascend?
Use any decent image converter, duh.

I can personally recommend XnConvert. Free, fast, and powerful.

1. Download it from .
2. Install or extract.
3. Add the files or folders you wish to compress (via the buttons or drag n' drop).
View attachment 3217636
3a. If your source is in 4K and you want the 1080p, use the Actions tab and then Image > Resize. Use 'Lanczos' or 'Lanczos2' - yields the best results.
View attachment 3217637
4. In the Output tab select where you want to keep the original setup ("Source Folder") or not, the output filename, and the format.
View attachment 3217638
5. Select the numbers of cores you want to use (I prefer sticking to physical only, so half the max value).
6. Select the WEBP from the "Format" menu.
View attachment 3217639
6a. Recommended settings:
  • Quality:
    • For DAZ3D games (with lots of small details) I typically use 92-96, but keep in mind that darker scenes require higher value to retain the detail.
    • For HoneySelect games I typically use 90, but go as low as 87 - assets in HS-based games are usually simpler, hence the lower value.
    • For CharaStudio game I typically use 85, but you can go to 80 even - the shading style is very simple and forgiving.
  • Compression Method:
    • This one is pretty simple. 0 for the fastest conversion but biggest output file and 6 for the slowest conversion and smallest output file. Personally, it's worth setting it to 6 and letting it rip.
  • Filter Strength:
    • Sets the aggressiveness of the "deblocking filter". The higher the value the "smoother" the image will be, but you have experiment with this one. It comes into effect at lower quality value (anything below 85).
  • Filter Sharpness:
    • Pretty self-explanatory. The higher the value, the weaker the effect.
  • Sharp RGB > YUV Conversion is a MUST. This option preserves a ton of details, especially in the reds.
7. That's it. You're a better human now. Congrats.

Comparison: (2.5 MB vs 212 KB)

Misc. notes:
- Don't do 100 quality or, Satan forbid, lossless. It's a waste of time and what the algorithm is capable of.
- A well-compressed WEBP 1080p image should not be larger than 600-650 KB. If you're close to 1 MB, tweak your settings.
- ALWAYS try to compress from the source material - this yields the best results since the algo has the most data to work with.
god bless you, honestly
 
  • Heart
Reactions: skyrfen