Losslessly compress PNG files.

[XhmikosR]

Used optipng -o7 and zopflipng.

Before: 3,89 MB (4.084.200 bytes)
After: 2,14 MB (2.245.311 bytes)

[znarf]

@XhmikosR Thank you! Can you please share the exact commands that were used to do that?

[XhmikosR]

If you are trying to reproduce the exact savings you won't be able :)

I'm using my custom scripts which are Windows only.

The basic commands are:

• optipng -o7 in.png
• zopflipng -m --lossy_transparent -y --iterations=1000 "in.png" "in.png"

[znarf]

Would it be possible to create a JS file in scripts that produce the same output?

Perhaps using imagemin, imagemin/imagemin-optipng and imagemin/imagemin-zopfli as dependencies?

[XhmikosR]

Nope, because not all tools are available for all platforms. optipng and zopflipng are cross-platform but pngout isn't.

[XhmikosR]

Also, remember what I told you Slack :) I'm not familiar with webpack otherwise I would have added svgo myself.

But in general I say after this gets merged you can add https://www.npmjs.com/package/imagemin-webpack-plugin and I can help setting it up.

Remember, my compression results are the best possible. This is just lossless compression BTW. Lossy the savings would be ~2x.

[znarf]

It's great to have the images compressed, it's better if we have a methodology that anyone can use to do it again.

Would that do the job for pngout? https://github.com/imagemin/imagemin-pngout https://github.com/imagemin/pngout-bin

Looks like this is providing cross-platform binaries.

[XhmikosR]

It could work, sure.

But like I said, I ran everything with the maximum options. Normally, in a build step, you won't do that, because it'll take a huge amount of time.

[znarf]

This doesn't need to be integrated in the build process. Just a JS script in the scripts folder, for example named optimize_png.js, so that anyone can execute it.

[XhmikosR]

You can add a script, sure. I don't have the time to do it nor am I familiar with webpack. It already took me many hours to achieve these results.

[znarf]

@XhmikosR, thank you very much for the time you did invest in this. It's really appreciated 🙏

As an Open Source project, it's important to understand how things are working, share the knowledge with the community, in that case reproduce the optimization process. If you have custom scripts and tricks that are too complicated to share, we understand, achieving 90% of that with sensible options would already be a great win for us.

So, based on your input, I created a branch with a simplistic first version of such script. At this stage, this doesn't touch webpack at all. #540

[XhmikosR]

I'm aware how open source works ;)

The thing is that a random script means nothing. Everything should be hooked up in your build process.

[znarf]

@XhmikosR I'm up for integrating image optimization in the build process, and we're gonna do something there. But as you said, this kind of lossless compression is too slow to be integrated in the build.

[XhmikosR]

Agreed. I suggest that this gets merged and we hook up a webpack plugin later. There's still the SVGs which I didn't make a PR because those should definitely be minified on build time.