Tutorial Others Making Your Games Smaller w/o Quality Loss - PNG, JPG, MP3 Optimization

[gue5t]

1) Benchmarks done without live data are not equal to real life tests because they just measure performance with a constant stream of data. There purpose is to give you a measurement of you're hardware performance at thou's settings.
2) I think it was clear I was testing it with Deflate (zip) compression, not to mention that pass=10 is not a valid LZMA2 parameter.
3) Compatibility is different than not knowing how to do something but I'll have to agree that it's easier for beginners using Windows to open zip's than 7z.

 

[Cyan]

Let me prove you wrong, as you can see in some cases a PNG (50KB) file can be smaller and with better quality than a JPG (82KB) version of the same image. And if we use OptiPNG on the png file we get a 35KB version.

Challenge accepted.

Png is noticeably higher quality. The text is noticeably sharper and the colors are are noticeably duller with the jpg. Look closely at the 'blue' highlighted section. 'Angled text' is noticably duller, compare the sharpness of an 'S' (since the pixels are aliased) vs the lossless of 'F' (since no aliasing is required).

This was about as generous as you could possibly be with a jpg/png since the vast majority of the image is that gray color. In a real image from a real game, I could come up with dozens, if not hundreds of small examples from a single image.

As for the file size - JPG will almost never be the same size as a PNG. This is just a unique example because most of the image is the same color. (The marking data for the JPG compression was higher than the actual size of the PNG)

That being said, I still recommend using JPG over PNG - assuming it's a high quality JPG like this. The quality is still great, I just can still notice the difference.

 

[gue5t]

About jpeg lossless optimization:
View attachment 47466

It must be a recent addition to the settings because it's not present in my version. Unfortunately it's not mentioned in the program's change log. I'll have to test that - won't be the first time an author claimed that and was proven wrong by tests.

Challenge accepted.
...
That being said, I still recommend using JPG over PNG - assuming it's a high quality JPG like this. The quality is still great, I just can still notice the difference.

If you have the time and skill the best solution is the hybrid one that's being used by some authors here. A combination of HQ JPG with PNG files for interface, taking advantage of there transparency and layers can produce astonishing results with much smaller file sizes than using just JPG or PNG files.

 

[CobraPL]

yep,

Interface - optimized PNGs
Renders - optimized HQ JPGs

 

[baka]

i would never use jpg on my games, but it also depends what kind of game.
as CobraPL wrote, a render (realistic, full of colors) a jpg is ok, a png would be huge in comparison. while png for interface,
but png could be used as a part of a layered based game, you know, when theres multiple images one above the other, the image need to be lossless, as it uses opacity/alpha, a jpg would destroy that.

also, images with specific details where it have unused space (mostly the transparent area), usually a png will be smaller in size then a jpg, a jpg would use a "full" image compression without considering that, as jpg don't use opacity/alpha/transparency at all.

 

[CobraPL]

Information about WebP added to the first post. Could anyone test his game assets, if WebP (lossy) is better than jpeg (lossy) ?
WebP (lossless) seems better than PNG (lossless).

 

[Deleted member 498007]

I usually use TinyPng for optimization of images, can't spot any difference in image quality

 

[CobraPL]

I usually use TinyPng for optimization of images, can't spot any difference in image quality

Optimizer uses several optimizers ran one by one.

 

[gue5t]

I usually use TinyPng for optimization of images, can't spot any difference in image quality

Just because you can't see the difference doesn't mean it isn't there, you should use a program that shows the difference between images before claiming there is or isn't "any difference in image quality" and it should be made on an image by image case due to the lack of choice of the different techniques used for optimizing the image files (some of them reduce the image quality and some don't).

 

[CobraPL]

What does TinyPNG do?

TinyPNG uses smart lossy compression techniques to reduce the file size of your PNG files. By selectively decreasing the number of colors in the image, fewer bytes are required to store the data. The effect is nearly invisible but it makes a very large difference in file size!

Well, yes. It is lossy. Optimizer I recommended is lossless.

 

[gue5t]

Here is a sample from TinyPNG (Left is the original, Right is the result and in the Middle is the comparison: Black = no difference; Blue = less than 25% difference; Red = more than 25% difference)

 

[muttdoggy]

Yeah that's a loss. The colors aren't as vibrant and to me, that's not worth the trade off. Are there any other comparisons to judge by?

 

[gue5t]

Here is the same sample in FileOptimizer (lossy option not selected) (Left is the original, Right is the result and in the Middle is the comparison: Black = no difference; Blue = less than 25% difference; Red = more than 25% difference)

P.S. I've attached the original picture in case you want to test for yourself. Keep in mind this sample was selected in order to demonstrate the need to check manually the result of such optimizations on case by case basis even when they claim they are lossless ...

Yeah that's a loss. The colors aren't as vibrant and to me, that's not worth the trade off. Are there any other comparisons to judge by?

Feel free to provide sample images you'd like to see the result from.

 

[muttdoggy]

:OhMyGoodness::test2: That's worse!

 

[gue5t]

OriginalSample == 679KB
FileOptimizer == 128KB
TinyPNG == 85KB

Keep in mind this is due to that the software uses or doesn't have the correct optimization for the image, in most cases the selection of the algorithm for losseless optimization is correct and the result is good but there are still plenty of cases like this one where there is a mistake and you get such results.

 

[CobraPL]

About lossy jpeg I'm writing to the author.
BUT! Could you test if PNG optimization is lossless and PNG-->WebP (lossless) too ?

What tool do you use?

 

[gue5t]

Here is another sample from TinyPNG (Left is the original, Right is the result and in the Middle is the comparison: Black = no difference; Blue = less than 25% difference; Red = more than 25% difference)


Here is the same sample in FileOptimizer (lossy option not selected) (Left is the original, Right is the result and in the Middle is the comparison: Black = no difference; Blue = less than 25% difference; Red = more than 25% difference)

OriginalSample == 72KB
FileOptimizer == 69KB
TinyPng == 35KB

P.S. I've attached the original picture in case you want to test for yourself.

 

[CobraPL]

And how with PNG-->WebP ? And what tool do you use to generate comparison? I and/or author need this information to troubleshoot problem. Optimizer uses multiple tools one by one and probably ONE of them screws image.

 

[gue5t]

About lossy jpeg I'm writing to the author.
BUT! Could you test if PNG optimization is lossless and PNG-->WebP (lossless) too ?

What tool do you use?

Can you convert the two sample images to WebP and attach them here?
It's a commercial version control tool for developers, you can use

You must be registered to see the links

as an easy tool with a bit of reading.

P.S. Keep in mind most software doesn't support WebP at the moment.

 

[CobraPL]

I can't attach WebP image to the post. So I attached zipped two files. Comparison script shows:
"These images are the same!"